合并 navbar-fixed-top 和 navbar-static-top

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-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> 

Working Example