twitter-bootstrap 带背景颜色的 Bootstrap 侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25554832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 21:25:03 来源:igfitidea点击:
Bootstrap sidebar with background color
提问by lowercase
I have a simple layout using bootstrap which gives me 2 columns - one LEFT and one RIGHT. Using the 12 column grid format of Bootstrap - the left should be 8 wide and the right column 4 wide like below.
我有一个使用 bootstrap 的简单布局，它给了我 2 列 - 一左一右。使用 Bootstrap 的 12 列网格格式 - 左列应该是 8 宽，右列应该是 4 宽，如下所示。
<div class="row">
<div class="col-md-8">Left Content</div>
<div class="col-md-4">Right Content</div>
</div>
The problem? How can i add a CONTAINER to the row so things are centered BUT give the right column a background color that stretches all the way to the edge of the browser. So if left background color is blue and right background is pink, the colors run full width whilst keeping content within them centered via the container.
问题？我如何向行中添加一个 CONTAINER 以便事物居中但给右列一个一直延伸到浏览器边缘的背景颜色。因此，如果左背景颜色是蓝色，右背景是粉红色，则颜色会在全宽范围内运行，同时通过容器将其中的内容保持在中心位置。
回答by Abraham Tugalov
Easy.
Working solution: https://jsfiddle.net/qbe2k1he/
简单。
工作解决方案：https: //jsfiddle.net/qbe2k1he/
/** Custom CSS **/
body {
background-color: #4E8FD8;
overflow-x: hidden;
}
.content, .sidebar {
border: 1px solid white;
color: white;
padding: 20px;
text-transform: uppercase;
min-height: 500px;
}
.content {
min-height: 2000px;
}
.sidebar::before {
content: '';
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background: #DB4ECB;
z-index: -1;
margin-left: -35px;
}
@media screen and (max-width: 991px) {
.sidebar::before {
display: none;
}
}
/** Bootstrap Grid **/
@-ms-viewport {
width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
.visible-print {
display: none !important;
}
@media print {
.visible-print {
display: block !important;
}
table.visible-print {
display: table;
}
tr.visible-print {
display: table-row !important;
}
th.visible-print,
td.visible-print {
display: table-cell !important;
}
}
.visible-print-block {
display: none !important;
}
@media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
@media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
@media print {
.hidden-print {
display: none !important;
}
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0%;
}
@media (min-width: 768px) {
.col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 992px) {
.col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 1200px) {
.col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666667%;
}
.col-lg-pull-10 {
right: 83.33333333%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666667%;
}
.col-lg-pull-7 {
right: 58.33333333%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666667%;
}
.col-lg-pull-4 {
right: 33.33333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666667%;
}
.col-lg-push-10 {
left: 83.33333333%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666667%;
}
.col-lg-push-7 {
left: 58.33333333%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666667%;
}
.col-lg-push-4 {
left: 33.33333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.66666667%;
}
.col-lg-push-1 {
left: 8.33333333%;
}
.col-lg-push-0 {
left: auto;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0%;
}
}
.clearfix,
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} <div id="wrapper">
<div class="container">
<div class="col-md-9">
<div class="content">
<p>left content</p>
</div>
</div>
<div class="col-md-3">
<div class="sidebar">
<p>right content</p>
</div>
</div>
</div>
</div>回答by gihandilanka
You can try this, it works for me, you have to add an additional css class.
你可以试试这个，它对我有用，你必须添加一个额外的 css 类。
<div class="container col-md-12 nopadding">
<div class="row">
<div class="col-md-8" style="background-color:blue;">Left Content</div>
<div class="col-md-4" style="background-color:pink;">Right Content</div>
</div>
</div>
and CSS as below
和 CSS 如下
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
回答by fabkast
I'm surprised I found only a few questions like this one. I had a similar requirement and I managed to solve it using a combination of absolute positioned elements and vwunits.
我很惊讶我只发现了几个这样的问题。我有一个类似的要求，我设法使用绝对定位元素和vw单位的组合来解决它。
Basically, a wrapper element has the background color of the left side to make it look like it extends to the border of the screen and an absolute positioned div with the same width of the viewport extends as background of the right side.
基本上，包装元素具有左侧的背景颜色，使其看起来像延伸到屏幕的边界，并且具有相同视口宽度的绝对定位 div 延伸为右侧的背景。
You can see it working in this codepen
你可以看到它在这个代码笔中工作
Markup goes like this
标记是这样的
<div class="wrapper"> <!-- to style bg without with messing with container margins -->
<div class="container">
<div class="row">
<div class="col-md-8 left"></div>
<div class="col-md-4 right">
<div class="bg"><!-- additional element that will act as background --></div>
</div>
</div>
</div>
</div>
And css:
和CSS：
/* Wrapper has the bg color of left side */
.wrapper,
.left {
background-color: blue;
}
/* Right container */
.right {
background-color: pink;
position: relative; /* Let it have absolute positioned children */
z-index: 0;
}
.right .bg {
background-color: pink;
/* Following will make our bg element the same size as its parent
and will put it behind it making it look like a background */
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
width: 100%; // fallback for old browsers, bg will be same size as its parent
width: 100vw; // Have the bg the same width as the screen, making the bg hang outside the screen
}
Notethat as bg will hang outside the container, you will need the wrapperdiv or one of its parent to have its overflow-xproperty as hidden, otherwise horizontal scrolling bars will appear.
请注意，由于 bg 将挂在容器外，因此您需要wrapperdiv 或其父级之一具有其overflow-x属性 as hidden，否则将出现水平滚动条。
If you have some specific elements inside your right column you can even use css pseudo elements like :beforeto avoid the declaration of the bgelement.
如果你的右栏中有一些特定的元素，你甚至可以使用 css 伪元素:before来避免元素的声明bg。
Also, you need to set the appropriate screen breakpoints to style this for smaller screen sizes.
此外，您需要设置适当的屏幕断点以针对较小的屏幕尺寸设置样式。
回答by hsdiego
Check my solution. I guess you need this one - codepenBut you need to include bootstrap 4 instead of bootstrap 3
检查我的解决方案。我想你需要这个 - codepen但是你需要包含 bootstrap 4 而不是 bootstrap 3
html, body, .wrapper{
height:100%;
}
.wrapper{
padding:10px;
}
.right {
position: relative;
z-index: 0;
padding:0 !important;
}
.wrapper {
background-color: #00a2ff;
overflow-x: hidden;
}
.right:before {
content:"";
background-color: #f7469e;
height: 100%;
position: fixed;
top: 0;
width: 100%;
width: 100vw;
z-index: -1;
}
body {
background-color: #999;
color: #fff;
}
.left, .right {
outline: 1px solid #fff;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-8 left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="col-4 right">Right Content -THIS CONTENT MUST NOT BE FULL WIDTH. MUST ONLY BE WIDTH OF col-md-4. THE BACKGROUND COLOR must be full-width.</div>
</div>
</div>
</div>回答by nicogaldo
<div class="_100">
<div class="container col-md-8 nopadding" style="background-color:blue;">
<div class="col-md-8 right nopadding" style="background-color:blue;border:white 1px solid;margin:5px">Left Content</div>
</div>
<div class="container col-md-4 nopadding" style="background-color:pink;">
<div class="col-md-6 nopadding" style="background-color:pink;border:white 1px solid;margin:5px">Right Content</div>
</div>
</div>
<div class="_100">
<div class="container col-md-8 nopadding" style="background-color:blue;">
<div class="col-md-8 right nopadding" style="background-color:blue;border:white 1px solid;margin:5px">Left Content</div>
</div>
<div class="container col-md-4 nopadding" style="background-color:pink;">
<div class="col-md-6 nopadding" style="background-color:pink;border:white 1px solid;margin:5px">Right Content</div>
</div>
</div>
css:
css：
.nopadding{padding: 0 !important;margin: 0 !important;}
._100 {width:100%;}
.right{float:right;}
回答by gihandilanka
you can try this and you can change as you wish, no need additional css.
你可以试试这个，你可以随心所欲地改变，不需要额外的 css。
<div class="container col-md-12">
<div class="row col-md-6 col-md-offset-3">
<div class="col-md-8" style="background-color:blue;">Left Content</div>
<div class="col-md-4" style="background-color:pink;">Right Content</div>
</div>
</div>
Demohere
演示在这里
回答by Shawn Taylor
You've got to get pretty specific with your widths, which will get finicky at breakpoint, but this will work as a starting point:
您必须对宽度非常具体，这在断点处会变得很挑剔，但这将作为起点：
DEMO: http://www.bootply.com/F9PCGnQr6Y
演示：http: //www.bootply.com/F9PCGnQr6Y
<div class="container bg-grey">Example Container</div>
<div class="col-md-8 bg-info" style="height:100px">
<div class="row">
<div class="left-container bg-warning pull-right" style="height:50px">
<div class="col-xs-12">Left Content - is wider than in-container col-md-8, because it's 8/12ths of full-width</div>
</div>
</div>
</div>
<div class="col-md-4 bg-danger" style="height:100px">
<div class="row">
<div class="right-container bg-success" style="height:50px">
<div class="col-xs-12">Right Content</div>
</div>
</div>
</div>
You'll definitely need to write some custom behaviour at your breakpoint(s), and also may want the internal containers to be col-7 and col-5 since the initial col-8 ends up being very wide within, but those customizations are up to you...
您肯定需要在断点处编写一些自定义行为，并且还可能希望内部容器为 col-7 和 col-5，因为最初的 col-8 最终在内部非常广泛，但这些自定义是由你决定...
回答by Vlad_IT
Here's the solution. The blocks are adaptive, you can set any height for both blocks, the height is also set automatically depending on the content. codepen
这是解决方案。块是自适应的，您可以为两个块设置任意高度，高度也会根据内容自动设置。代码笔
<section>
<div class="container">
<div class="block block_left">
<div class="block__content">
<p>
С другой стороны консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.
Не следует, однако забывать, что сложившаяся структура организации требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.
Товарищи! рамки и место обучения кадров требуют от нас анализа существенных финансовых и административных условий.
Товарищи! реализация намеченных плановых заданий играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.
Идейные соображения высшего порядка, а также новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.
Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач.
</p>
<p>
Задача организации, в особенности же постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации.
Не следует, однако забывать, что укрепление и развитие структуры позволяет выполнять важные задания по разработке модели развития.
Таким образом рамки и место обучения кадров требуют определения и уточнения систем массового участия.
Разнообразный и богатый опыт реализация намеченных плановых заданий играет важную роль в формировании дальнейших направлений развития.
</p>
<p>
Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.
Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.
Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.
Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.
Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.
Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.
</p>
<p>
Разнообразный и богатый опыт начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки новых предложений.
Таким образом новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.
</p>
<p>
С другой стороны реализация намеченных плановых заданий позволяет выполнять важные задания по разработке форм развития.
Товарищи! начало повседневной работы по формированию позиции требуют определения и уточнения направлений прогрессивного развития.
</p>
<p>
Таким образом сложившаяся структура организации представляет собой интересный эксперимент проверки новых предложений.
Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения форм развития.
</p>
</div>
</div>
<div class="block block_right">
<div class="block__content">
<p>
Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.
Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.
Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.
Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.
Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.
Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.
</p>
</div>
</div>
</div>
</section>
<style>
body {
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
font-size: 0px;
display: flex;
flex-wrap: wrap;
}
.block {
display: inline-block;
font-size: 16px;
box-sizing: border-box;
position: relative;
color: white;
vertical-align: top;
}
.block_left {
width: 70%;
}
.block_right {
width: 30%;
}
.block::before {
content: '';
width: 150vw;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
background: #3f80cb;
min-height: 100vh;
}
.block_right:before {
background: #d55bc3;
right: auto;
left: 0px;
}
.block__content {
outline: 1px solid #ffffff91;
margin: 20px;
padding: 1px 10px;
}
@media screen and (max-width: 700px) {
.block {
width: 100%;
}
.block::before {
min-height: 0px;
}
}
</style>
