Bootstrap 3 半背景色

Question

I need to align TEXT of container-fluid at same padding/margin like container.我需要在与容器相同的填充/边距处对齐容器流体的文本。 You have example in this image:您在此图像中有示例：

EDIT: See 2nd photo, i want that padding to be the same on container-fluid / container, and when you minimize screen to be responsive..编辑：参见第二张照片，我希望容器流体/容器上的填充相同，并且当您最小化屏幕以响应时..

 .nopadding { margin: 0 !important; padding: 0 !important; } .bg { background-color: #f3f3f3; } .left { height: 650px; } .img-bg { margin-right: 0px !important; height: 650px; background: url(http://placehold.it/850x650) no-repeat center center; background-size: cover; }

 <section id="id1"> <div class="container-fluid"> <div class="row"> <div class="col-md-7 nopadding bg"> <div class="left"> <h2>TEXT</h2> </div> </div> <div class="col-md-5 nopadding img-bg"> </div> </div> </div> </section>

Answer 1

Here is my solution:这是我的解决方案：

HTML part: HTML部分：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
      <p>Text</p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 image no-padding">
      <div class="full-width"></div>
    </div>
  </div>
</div>

<div class="clearfix"></div>

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
      <p>Text</p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
      <p>Text</p>
    </div>
  </div>

  <div class="clearfix"></div>

  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
      <p>Text</p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
      <p>Text</p>
    </div>
  </div>
</div>

CSS part: CSS部分：

.center-flex {
  /* Internet Explorer 10 */
  display:-ms-flexbox;
  -ms-flex-pack:center;
  -ms-flex-align:center;
  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;
  /* Safari, Opera, and Chrome */
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;
  /* W3C */
  display:box;
  box-pack:center;
  box-align:center;
}

.container-fluid .text {
  background: #515467;
  height: 650px;
}

.container .text {
  background: #737373;
  height: 300px;
}

.container-fluid .image {
  background: #2D2D2D;
  height: 650px;
}

.full-width {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  background-image:url('http://placehold.it/850x650');
  background-size:cover;
}

.full-width img {
  width:100%;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

You can see the jsfiddle result: https://jsfiddle.net/DTcHh/18725/可以看到jsfiddle结果： https ://jsfiddle.net/DTcHh/18725/

Answer 2

try with this below code it may help you尝试使用下面的代码它可能会帮助你

 .text1{ background : #0f74bd; padding : 50px; color : white; font-weight : bold; } .image{ background : #000; padding : 50px; color : white; font-weight : bold; } .text{ background : #9ea3a9; padding : 50px; color : white; font-weight : bold; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <section> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 col-md-6 col-xs-6 text1"> TEXT1 </div> <div class="col-sm-6 col-md-6 col-xs-6 image"> IMAGE </div> </div> </div> <div class="container text"> <div class="row"> <div class="col-sm-6 col-md-6 col-xs-6"> TEXT2 </div> <div class="col-sm-6 col-md-6 col-xs-6"> TEXT3 </div> <div class="col-sm-6 col-md-6 col-xs-6"> TEXT2 </div> <div class="col-sm-6 col-md-6 col-xs-6"> TEXT3 </div> </div> </div> </section>

Answer 3

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> </head> <body> <div style="background-color: blue" class="container-fluid"> <h1 style="text-align:center">Container-Fluid</h1> <div class="row"> <div style="text-align:center" class="col-xs-6">TEXT 1</div> <div style="text-align:center" class="col-xs-6">IMAGE</div> </div> <div style="background-color: yellow" class="container"> <h1 style="text-align:center">Container</h1> <div class="row"> <div style="text-align:center" class="col-xs-6">Text 1</div> <div style="text-align:center" class="col-xs-6">Text 2</div> <div style="text-align:center" class="col-xs-6">Text 3</div> <div style="text-align:center" class="col-xs-6">Text 4</div> </div> </div> </div> </body> </html>

Is this what u want, using bootstrap这是你想要的吗，使用引导程序

Bootstrap 3 半背景色

问题描述

3 个解决方案

解决方案1
1 2016-03-31 12:13:18

解决方案2
0 2016-03-31 11:51:27

解决方案3
0 2016-03-31 12:46:11

Bootstrap 3 半背景色

问题描述

3 个解决方案

解决方案1 1 2016-03-31 12:13:18

解决方案2 0 2016-03-31 11:51:27

解决方案3 0 2016-03-31 12:46:11

解决方案1
1 2016-03-31 12:13:18

解决方案2
0 2016-03-31 11:51:27

解决方案3
0 2016-03-31 12:46:11