Question

我正在使用Bootstrap作为整体网站，但必须将主内容放在带有％边距的12列网格中以创建边缘＆＃39;。有一个辅助粘性导航工作在页面链接（而不是词缀），但问题是在更宽的屏幕尺寸，一旦导航修复它从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;
}

Answer 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;
}

Bootstrap粘性导航和网格问题

1 个答案: