合並導航欄固定頂部和導航欄靜態頂部

Question

我在這里發現了類似的問題，但不是這個特定的問題。

我的網站范圍很廣，因此當我使用navbar-static-top時，它不能覆蓋整個寬度；當我使用navbar-fixed-top時，它在打開時不會壓低內容

我可以同時選擇兩個選項嗎？ 意思是固定的導航欄，可以壓低內容

<div id="collapseMenu" class="navbar navbar-inverse navbar-right navbar-fixed-top">
      <div class="container">
        <a href="#Home" class="navbar-brand img-responsive img-circle"><img src="Images/C SHARK-white-150x199.png" alt="C SHARK" class="img-size" /></a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navbarHeaderCollapse ">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#Home"> <span class="glyphicon glyphicon-home"></span> Home</a></li>              
            <li><a href="#AboutUs"> <span class="glyphicon glyphicon-info-sign"></span> About Us</a></li> 
            <li><a href="#OurWork"> <span class="glyphicon glyphicon-wrench"></span> Our Work</a></li>            
            <li><a href="#Technologies"> <span class="glyphicon glyphicon-phone"></span> Technologies</a></li>
            <li><a href="#ContactUs"> <span class="glyphicon glyphicon-envelope"></span> Contact Us</a></li>            
          </ul>
        </div>
      </div>
    </div> 

Answer 1

恐怕不是。 fixed元素將從流程中刪除，因此不能以任何方式下推內容。 但是，如果您只是在navbar-static-top上navbar-static-top的寬度，請嘗試從元素中刪除navbar-right類。

<div id="collapseMenu" class="navbar navbar-inverse  navbar-static-top">
  <div class="container">
    <a href="#Home" class="navbar-brand img-responsive img-circle"><img src="Images/C SHARK-white-150x199.png" alt="C SHARK" class="img-size" /></a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navbarHeaderCollapse ">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#Home"> <span class="glyphicon glyphicon-home"></span> Home</a></li>              
        <li><a href="#AboutUs"> <span class="glyphicon glyphicon-info-sign"></span> About Us</a></li> 
        <li><a href="#OurWork"> <span class="glyphicon glyphicon-wrench"></span> Our Work</a></li>            
        <li><a href="#Technologies"> <span class="glyphicon glyphicon-phone"></span> Technologies</a></li>
        <li><a href="#ContactUs"> <span class="glyphicon glyphicon-envelope"></span> Contact Us</a></li>            
      </ul>
    </div>
  </div>
</div> 

工作實例