Bootstrap 4固定顶部导航栏内部列

问题描述：

我试图创建一个布局，在左侧和右侧的侧边栏固定顶部导航栏，并在我的网站内容下。我有什么：Bootstrap 4固定顶部导航栏内部列

<div class="container-fluid"> 
     <div class="row no-gutter"> 

      <!-- left side --> 
      <div class="col-md-4 sidebar" style="background-color: red;"> 
       <p>test</p> 
      </div><!-- end left side --> 

      <!-- right side --> 
      <div class="col-md-8 offset-md-4"> 

       <!-- nav --> 
       <div class="row no-gutter" style="background-color: blue"> 
        <nav class="col-12 navbar fixed-top navbar-toggleable-md"> 
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> 
          <span class="navbar-toggler-icon"></span> 
         </button> 
         <div class="collapse navbar-collapse" id="navbar"> 
          <ul class="navbar-nav"> 
           <li class="nav-item"> 
            <a class="nav-link" href="#">Home</a> 
           </li> 
          </ul> 
         </div> 
        </nav> 
       </div><!-- end nav --> 

       <!-- main content --> 
       <div class="row no-gutter" style="background-color: green;"> 
        <div class="col-12"> 
         <p> main content </p> 
        </div> 
       </div><!-- end main content --> 

      </div><!-- end right side --> 
     </div> 
</div>

https://jsfiddle.net/0ka85tmn/1/

我似乎无法得到正确的导航栏。它不会留在我的专栏中。我玩过位置属性，但无法使其工作。

任何人都可以帮忙吗？

答

使用position:fixed将navbar从正常的文档流中取出并使其相对于整个页面，因此它不再包含在其父项中。出于这个原因，你需要专门设置导航栏的位置...

.navbar { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 33.3333%; 
    z-index: 1; 
}

此外，没有任何理由来遏制它在row和col-12。

演示：http://www.codeply.com/go/5bPIH8Tbiw

Bootstrap 4固定顶部导航栏内部列

相关推荐