获取扩展到屏幕边缘的具有不同背景颜色的两列
[英] Get Two Columns with different background colours that extend to screen edge
本文介绍了获取扩展到屏幕边缘的具有不同背景颜色的两列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
不是
我发现
下面是我最接近它的代码片段，这可能完全是错误的方法:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><div class="container" style="background: bisque;"><div class="row"><div class="col-xs-12"><h1>正常盒装宽度</h1>
<div class="container-fluid"><div class="row" style="background-color: aquamarine; padding: 0"><div><div class="col-sm-8 col-sm-offset-1"><h1>左面板</h1><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Recusandae doloribus unde，distinctio a autem，soluta nulla similique.Vero natus deleniti, culpa consequuntur Eveniet beatae laudantium in fuga mollitia sapiente！假设！</p>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff"><h1>右面板</h1><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Ducimus, beatae amet est repelendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div><!-- .row --></div><!-- .container-fluid -->
解决方案
Bootstrap 5 测试版
Bootstrap 5 中的概念仍然相同.使用列上的绝对位置伪元素在 container-fluid 中创建 container 的外观>...
Bootstrap 5 示例
或者， 使用 container-fluid 并将较小的网格列嵌套在带有背景颜色的外列中...
<div class="row"><div class="col-6 bg-info"><div class="row justify-content-end"><div class="col-9">... </div>
<div class="col-6 bg-danger"><div class="row justify-content-start"><div class="col-9">... </div>
Bootstrap 5 嵌套示例
引导程序 4
Bootstrap 4 中的概念仍然相同，但 -xs- 中缀不再存在.
Bootstrap 4 示例
<小时>引导程序 3(原始答案)
在第二个容器周围使用另一个包装 DIV...
<div class="row"><div class="col-xs-12"><h1>正常盒装宽度</h1>
<div style="background-color: aquamarine;填充:0"><div class="container"><div class="row"><div><div class="col-sm-9"><h1>左面板</h1><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Recusandae doloribus unde，distinctio a autem，soluta nulla similique.Vero natus deleniti, culpa consequuntur Eveniet beatae laudantium in fuga mollitia sapiente！假设！</p>
<div class="col-sm-3 gray-background";style="background-color: rebeccapurple;padding: 10px;color:#fff"><h1>右面板</h1><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Ducimus, beatae amet est repelendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
<!-- .row -->
<!-- .container-fluid -->
编辑
使用伪元素，例如..
.right:before {右:-999em；背景:rebeccapurple；内容: '';显示:块；位置:绝对；宽度:999em；顶部:0；底部:0；}
引导程序 3 示例
<小时>类似问题: Bootstrap 容器填充边为颜色
Not a duplicate of this.
I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.
It should look like this:
I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:
Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->
解决方案
Bootstrap 5 beta
The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...
Bootstrap 5 example
Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-info">
<div class="row justify-content-end">
<div class="col-9"> ... </div>
</div>
</div>
<div class="col-6 bg-danger">
<div class="row justify-content-start">
<div class="col-9"> ... </div>
</div>
</div>
</div>
</div>
Bootstrap 5 nesting example
Bootstrap 4
The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.
Bootstrap 4 example
Bootstrap 3 (original answer)
Use another wrapper DIV around a 2nd container...
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div style="background-color: aquamarine; padding: 0">
<div class="container">
<div class="row">
<div>
<div class="col-sm-9">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
</div>
EDIT
Use a psuedo element such as..
.right:before {
right: -999em;
background: rebeccapurple;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
Bootstrap 3 example
Similar question: Bootstrap container fill sides with colors
这篇关于获取扩展到屏幕边缘的具有不同背景颜色的两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
