Bootstrap,容器,容器-流体
Bootstrap, container, container-fluid
这是我试图使用 Bootstrap 实现的目标:-
红线表示容器 div 所在的位置。
我遇到的问题是背景颜色。因此,例如,如果我做了如下操作:-
<div class="container-fluid">
<div style="background: #888;" class="col-md-8">
left content
</div>
<div style="background: #999;" class="col-md-4">
right content
</div>
</div>
背景是我想要的,但是 'left content' 和 'right content' 不会像网站的其他内容一样位于 'container' 内,如下所示:-
我怎样才能做到这一点?
如果这还不够清楚,我会进一步解释,谢谢。
试试这个
<div class="container-fluid">
<div class="row">
<div style="background: #888;" class="col-md-8">
left content
</div>
<div style="background: #999;" class="col-md-4">
right content
</div>
</div>
</div>
一种解决方案是扭曲容器并为其添加渐变背景。只有当两列彼此相邻时,该背景才应该可见。
CSS
@media (min-width: 992px ) {
.wrap { background: linear-gradient(to right, #888 0%, #888 50%, #999 50%, #999 100%); }
}
HTML
<div class="wrap">
<div class="container">
<div class="row">
<div class="col-md-8" style="background: #888;">
Left content
</div>
<div class="col-md-4" style="background: #999;">
Right content
</div>
</div>
</div>
</div>
这是我试图使用 Bootstrap 实现的目标:-
红线表示容器 div 所在的位置。
我遇到的问题是背景颜色。因此,例如,如果我做了如下操作:-
<div class="container-fluid">
<div style="background: #888;" class="col-md-8">
left content
</div>
<div style="background: #999;" class="col-md-4">
right content
</div>
</div>
背景是我想要的,但是 'left content' 和 'right content' 不会像网站的其他内容一样位于 'container' 内,如下所示:-
我怎样才能做到这一点?
如果这还不够清楚,我会进一步解释,谢谢。
试试这个
<div class="container-fluid">
<div class="row">
<div style="background: #888;" class="col-md-8">
left content
</div>
<div style="background: #999;" class="col-md-4">
right content
</div>
</div>
</div>
一种解决方案是扭曲容器并为其添加渐变背景。只有当两列彼此相邻时,该背景才应该可见。
CSS
@media (min-width: 992px ) {
.wrap { background: linear-gradient(to right, #888 0%, #888 50%, #999 50%, #999 100%); }
}
HTML
<div class="wrap">
<div class="container">
<div class="row">
<div class="col-md-8" style="background: #888;">
Left content
</div>
<div class="col-md-4" style="background: #999;">
Right content
</div>
</div>
</div>
</div>