2016-12-28 114 views
0

這裏是我的代碼。Bootstrap導航欄崩潰問題與多個標頭

<header class="navbar-inverse navbar-fixed-top wet-asphalt"> 
    <div class="container"> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse"> 
       <a href="tel:9XXXXXXXXX">Call now!</a> 
      </button> 
     </div> 
     <div class="collapse **navbar-collapse**"> 
      <ul class="nav navbar-nav navbar-right" style="margin-top:0px;"> 
       <li><a href="tel:9XXXXXXXXX">9XXXXXXXXX</a></li> 
       <li><a href="mailto:[email protected]">mail us</a></li> 
      </ul> 
     </div> 
    </div> 
</header> 

<header class="navbar navbar-inverse wet-asphalt" role="banner" style="margin-top: -46px; border-radius:0px;"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="margin-top: 25px;"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a> 
     </div> 
     <div class="collapse **navbar-collapse**"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="index.html">Home</a></li> 
       <li><a href="about-us.html">About Us</a></li> 
      </ul> 
     </div> 
    </div> 
</header> 

當我點擊第二個標題菜單,同時在移動設備上查看它。它會觸發navbar-collapse。當我從第一個標題刪除navbar-collapse類時,它會消失。

我不希望班級也從我的第一個標題中刪除,也不希望它崩潰。 請幫我整理一下。我是Bootstrap的新手。

+0

取2個功能,一個是第一頭和第二個是第二頭 –

回答

0

如果你想保持在任何時候都暴露在保持標準collapse功能的部分只使用兩個獨立的導航欄,但刪除collapse函數的第一個navbar的鏈接(該navbar-header節)從第一。然後,您可以使用navbar-fixed-top類將兩個導航都包圍起來。

*唯一需要應用的CSS是讓您的第一個導航鏈接內嵌在設備尺寸上。

工作實例:

body { 
 
    padding-top: 120px; 
 
} 
 
.navbar-inverse.navbar-top ul > li { 
 
    display: inline-block; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar-fixed-top"> 
 

 
    <div class="navbar-inverse navbar-static-top navbar-top"> 
 
    <div class="container"> 
 

 
     <ul class="nav navbar-nav pull-right"> 
 
     <li><a href="#">123 456-7890</a> 
 
     </li> 
 
     <li><a href="#">Mail Us</a> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container"> 
 

 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 

 
     <a class="navbar-brand" href="#"> 
 
      <img src="http://placehold.it/50x25/fff/fff"> 
 
     </a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="navbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home </a> 
 
      </li> 
 
      <li><a href="#">About Us</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</nav> 
 

 
<div class="container"> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

0

發生這種情況是因爲它們的data-target是相同的。給他們兩個不同的,例如data-target=".navbar-collapse-1"data-target=".navbar-collapse-2"

而且每個data-target應該指向相應的容器類。第一格將有頭等<div class="collapse navbar-collapse-1">和第二個應該有另一個<div class="collapse navbar-collapse-2">

這是你的工作代碼。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<header class="navbar-inverse navbar-fixed-top wet-asphalt"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1"> 
 
       <a href="tel:9XXXXXXXXX">Call now!</a> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right" style="margin-top:0px;"> 
 
       <li><a href="tel:9XXXXXXXXX">9XXXXXXXXX</a></li> 
 
       <li><a href="mailto:[email protected]">mail us</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</header> 
 

 
<header class="navbar navbar-inverse wet-asphalt" role="banner" style="margin-top: 150px; border-radius:0px;"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-2" style="margin-top: 25px;"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a> 
 
     </div> 
 
     <div class="collapse navbar-collapse-2"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="index.html">Home</a></li> 
 
       <li><a href="about-us.html">About Us</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</header>

+0

@hasim謝赫是你的問題解決了。如果是的話,請接受答案 – ab29007