合并导航栏固定顶部和导航栏静态顶部

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> 

工作实例