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

我在这里发现了类似的问题，但没有提到这一点。合并navbar-fixed-top和navbar-static-top

我有一个非常宽的网站，所以当我使用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>

来源

2014-10-30 Sherbieny

你可以使用jQuery来检测调整大小导航栏的高度，然后调整顶部填充。 – Christina 2014-10-30 16:29:51

我不明白 – Sherbieny 2014-10-30 18:34:15

我没有很好地读你的问题。忽略评论。这是一个静态的导航栏http://getbootstrap.com/examples/navbar-static-top/，它占用了全部宽度。这可能是因为你的导航栏上有奇怪的类。什么是导航栏 - 正确的做你的导航栏？它只发生在孩子身上。 – Christina 2014-10-30 20:01:25

恐怕不是。一个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

来源

2014-10-30 16:27:22 Sebsemillia

不幸的是，这并没有工作，它卡在页面的左侧，请注意我有一个500％的引导容器流体的网站，分为5 20％的行。所以当我滚动到右侧时，导航栏留在起始点 – Sherbieny 2014-10-30 18:32:03

Mhmm，我认为最好是如果在bootply中重现您的问题。在这种情况下，如果没有看到您的完整代码正在运行，很难为您提供帮助。 – Sebsemillia 2014-10-30 18:39:41

我在这里创建了它http://www.bootply.com/PhOKT1y4TI，虽然滑动动画不起作用，但是现在你已经有了这个想法，宽500％的容器有5个20％的列，并在它们之间水平滑动，目标是将菜单粘贴到顶部，并在缩小视图时切换内容。如果你切换到渲染视图，你可以看到它被卡住，但是在整个宽度上被拉伸，我希望它固定在20％和视图移动，如果你改变静态为固定，你会得到，但下推选项是不更多... – Sherbieny 2014-10-30 20:38:45

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

回答

相关问题