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

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

1 个答案: