Bootstrap 粘性导航和网格问题答案

【问题标题】：Bootstrap sticky nav and grid issuesBootstrap 粘性导航和网格问题
【发布时间】：2014-07-27 14:12:27
【问题描述】：

我在整个网站上使用 Bootstrap，但必须将主要内容放在 12 列网格中，并使用 % 边距来创建“边缘”。有一个辅助粘性导航在页面链接中工作（不带词缀），但问题是在更宽的屏幕尺寸上，一旦导航修复它就会从 12 列（z-index 9999）中删除自己并向左浮动 - 知道如何保持居中并“回到网格”将不胜感激..！

HTML

            <div id="strip" class="strip"> 
                <div id="navstrip"> 
                <ul class="navstrip navbar-nav2">  
                    <li><a href="#content1">Link 1</a></li>
                    <li><a href="#content2">Link 2</a></li>
                    <li><a href="#content3">Link 3</a></li>
                    <li><a href="#content4">Link 4</a></li> 
                </ul> 
                </div> <!-- /navstrip -->
            </div> 

        </div>
    </div><!-- /.col-lg-12 -->
</div><!-- /.row -->

CSS

body 
{
    padding-top: 50px;
    font-family: 'Lato', sans-serif;
    background: #bfbfbf;
}

.col-lg-12
{
    width: 84%;
    margin-left: 8%;
    margin-right: 8%;
}

#navstripbase
{
    width: 100%;
    background-color: #fff;
    height: 45px;
    padding-top: 5px;
}

#strip 
{
    top: 56px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

#navstrip 
{
    background-color: #626767;
    text-align: center;
}

#navstrip ul 
{
    margin: 0;
    padding: 0;
}

#navstrip li 
{
    margin-left: 0;
    margin-right: 0;
    display: inline;
}

#navstrip ul li a 
{
    color: #ddd;
    font-weight: 400;
    font-size: 15px;
    text-decoration: none;
    line-height: 40px;
    padding: 0 20px;
}

【问题讨论】：

标签： twitter-bootstrap nav sticky

【解决方案1】：

.navbar-fixed-top 和 .navbar-fixed-bottom 将元素的位置设置为固定。

您可以通过设置顶部、右侧、底部、左侧来定位固定元素。该位置是相对于其父级的。父级的位置不能是静态的。

你可能必须这样做：

html

<div class="row">
  <div class="col-lg-12">
    <div id="strip" class="strip"> 
      <div id="navstrip"> 
        <ul class="navstrip navbar-nav2">  
          <li><a href="#content1">Link 1</a></li>
          <li><a href="#content2">Link 2</a></li>
          <li><a href="#content3">Link 3</a></li>
          <li><a href="#content4">Link 4</a></li> 
        </ul> 
      </div> <!-- /navstrip -->
    </div> 
  </div>
</div><!-- /.row -->

css

.strip {
  position: relative;
}

#navstrip {
  position: fixed;
  top: 0;
  left: 0;
}

【讨论】：