我在我的布局中有一个左侧菜单,我的网格行在左侧菜单后延伸
问题描述:
我的布局有一个左侧菜单,然后我的头部有菜单,然后是我的主要内容区域。我在我的布局中有一个左侧菜单,我的网格行在左侧菜单后延伸
发生了什么事情是,如果我在主内容区域添加另一个网格行,它将被推到折叠下方,直到在左侧菜单下。
我在网格布局中犯了一个根本性的错误,还是有一个简单的解决方法?
<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>
答
将overflow: auto
加到.content-container .page-content
。 .row
类清除浮动,所以这是清除浮动的左侧菜单。 https://jsfiddle.net/4oak4p0o/15/
答
这样的事情? 我加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>
你能解释为什么这个工程?它与显示不同:inline-block? – Blankman
'inline-block'与'overflow:auto'不一样。两种根本不同的行为。 bootstrap添加'display:table;内容:“”;'为'.row'的伪元素,所以第一个工作,但是这将清除您的导航菜单上的浮动下一行。 'overflow:auto'会将'.row'类包含到'.page-content'中,而不是在外部溢出,并向下推动下一行以清除浮动的左侧菜单。 –