两个导航栏，一张带有 bootstrap 的图片。可能吗？

Question

我想在两个 bootsrap 导航栏上使用一张图片。我的问题是导航栏分割了图片。

我希望导航栏具有完整的图片，而不是像这样拆分。我的一些代码：

<nav class = "navbar navbar-fixed-top"> 
<nav calss = "navbar navbar-default">
  <div class="container-fluid">
    <ul class = "nav navbar-nav navbar-top navbar-right">
      <li><a class = "links" data-page = "us_hu" href = "#index_hu">Rólunk</a></li>
      <li><a class = "links" data-page = "services_hu" href = "#services_hu">Szolgáltatások</a></li>
      <li><a class = "links" data-page = "actual_offers_hu" href = "#actual_offers">Aktuális ajánlatok</a></li>
      <li><a href="./">EN</a></li>
    </ul>
  </div> 
</nav>

     <body id = "page-top" data-spy = "scroll" data-target = ".navbar-fixed-top" data-offset="40">
<nav class = "navbar navbar-fixed-top" style = "top:35px;">
<nav class = "navbar navbar-default">
  <div class = "container-fluid">
    <div class = "navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#matomNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <a class="navbar-brand" href="#matomPage">M.aTom</a>
    </div>  
      <div class="collapse navbar-collapse" id="matomNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#our-task">Alapelvünk</a></li>
      <li><a href="#gallery">Galéria</a></li>
      <li><a href="#about">Rólunk</a></li>
      <li><a href="#team">Csapat</a></li>
      <li><a href="#contact">Kapcsolat</a></li>
    </ul>
   </div>
  </div>
 </nav>
</nav>

CSS:

.navbar {
    font-family: 'Overpass', sans-serif;
    margin-bottom: 0;
    /*background-color: #4c4c4c; */
    background-image: url('../images/ten.png');
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 1px;
    border-radius: 0px;
    min-height: 0px;
}

Answer 1

试试这个---

<div class="wrapper" style="background-image:url('to your image')">
<div class="first_nav">
<div>
<div class="scnd_nav">
</div>
<div>
<script>
$("#first_nav").load("file path to fist_nav file");
</script>
<script>
$("#scnd_nav").load("file path to scnd_nav");

</script>

现在使用包装器的背景图像 div。

编辑

在下面的代码片段中，您可以看到背景图片没有被分割。只需给包装器 div 一个适当的 height css 属性.

<!doctype html>
<html>
<head>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
<div style='background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg"); height:70px;'>
<nav class = "navbar navbar-fixed-top"> 
    <ul class = "nav navbar-nav navbar-top navbar-right">
      <li><a class = "links" data-page = "us_hu" href = "#index_hu">Rólunk</a></li>
      <li><a class = "links" data-page = "services_hu" href = "#services_hu">Szolgáltatások</a></li>
      <li><a class = "links" data-page = "actual_offers_hu" href = "#actual_offers">Aktuális ajánlatok</a></li>
      <li><a href="./">EN</a></li>
    </ul>

  </nav>
  <nav class = "navbar navbar-fixed-top" style = "top:35px;">

  
    <div class = "navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#matomNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <a class="navbar-brand" href="#matomPage">M.aTom</a>
    </div>  
      <div class="collapse navbar-collapse" id="matomNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#our-task">Alapelvünk</a></li>
      <li><a href="#gallery">Galéria</a></li>
      <li><a href="#about">Rólunk</a></li>
      <li><a href="#team">Csapat</a></li>
      <li><a href="#contact">Kapcsolat</a></li>
    </ul>
   </div>
 
</nav>

  </div>
  </html>

注意

请根据屏幕大小添加适当的height属性。我的意思是使用 @media 属性。对于上面的代码片段，请全屏查看它的运行情况。

如果你想知道为什么会这样--

当您使用 class="navbar-fixed-top" 时，导航栏会与布局分离。因此，结果您需要将特定的 css 添加到渲染页面。希望对您有所帮助！

两个导航栏，一张带有 bootstrap 的图片。可能吗？

Two navbars, one picture with bootstrap. Is it possible?

css

navbar

twitter-bootstrap