我在我的布局中有一个左侧菜单，我的网格行在左侧菜单后延伸

我的布局有一个左侧菜单，然后我的头部有菜单，然后是我的主要内容区域。我在我的布局中有一个左侧菜单，我的网格行在左侧菜单后延伸

发生了什么事情是，如果我在主内容区域添加另一个网格行，它将被推到折叠下方，直到在左侧菜单下。

我在网格布局中犯了一个根本性的错误，还是有一个简单的解决方法？

<div class="container-fluid"> 
    <div class="menu-container"> 
     <ul class="menu" id="sidemenu"> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
    </ul> 
    </div> 

    <div class="content-container"> 
    <div class="header"> 
     <div class="row"> 
     <div class="col-sm-6"> 
      left header 
     </div> 
     <div class="col-sm-6 text-right"> 
      right header 
     </div> 
     </div> 
    </div> 
    <div class="page-content"> 
     <div class="row"> 
     <div class="col-sm-12"> 
      this is a row #1 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-sm-12"> 
      this is a row #2 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

https://jsfiddle.net/4oak4p0o/14/

来源

2017-04-14 Blankman

将overflow: auto加到.content-container .page-content。 .row类清除浮动，所以这是清除浮动的左侧菜单。 https://jsfiddle.net/4oak4p0o/15/

来源

2017-04-14 20:09:29

你能解释为什么这个工程？它与显示不同：inline-block？ – Blankman

'inline-block'与'overflow：auto'不一样。两种根本不同的行为。 bootstrap添加'display：table;内容：“”;'为'.row'的伪元素，所以第一个工作，但是这将清除您的导航菜单上的浮动下一行。 'overflow：auto'会将'.row'类包含到'.page-content'中，而不是在外部溢出，并向下推动下一行以清除浮动的左侧菜单。 –

这样的事情？我加display: inline-block;到。内容容器。第内容

在这里阅读更多：CSS display: inline vs inline-block

你想要什么效果，你可以取消的CSS样式，并添加背景颜色来检查容器/块

* { 
    border: 1px solid red; 
}

.menu-container { 
 
    width: 120px; 
 
    float: left; 
 
    display: block; 
 
    padding: 15px; 
 
    padding-bottom: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
.content-container { 
 
    width: 100%; 
 
    padding-left: 120px; 
 
} 
 

 
.content-container .header { 
 
    padding: 15px 20px; 
 
    height: 60px; 
 
} 
 

 
.content-container .page-content { 
 
    padding: 50px; 
 
/* background: green; */ 
 
    display: inline-block; 
 
} 
 

 

 
/* * { 
 
\t border: 1px solid red; 
 
} */

<div class="container-fluid"> 
 
    <div class="menu-container"> 
 
    <ul class="menu" id="sidemenu"> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="content-container"> 
 
    <div class="header"> 
 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      left header 
 
     </div> 
 
     <div class="col-sm-6 text-right"> 
 
      right header 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="page-content"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      this is a row #1 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      this is a row #2 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-04-14 20:06:42

我在我的布局中有一个左侧菜单，我的网格行在左侧菜单后延伸

回答

相关问题