Question

我需要将容器流体的TEXT与容器相同的填充/边距对齐。您在此图片中有示例：

编辑：看到第二张照片，我希望在容器 - 液体/容器上填充相同，并且当你最小化屏幕以便响应时..

＆＃13;

.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;
}

＆＃13;

  <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>

＆＃13;

Answer 1

这是我的解决方案：

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部分：

.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;
}

您可以看到jsfiddle结果：https://jsfiddle.net/DTcHh/18725/

Answer 2

尝试使用以下代码，它可以帮助您

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

＆＃13;

<!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>

＆＃13;

这是你想要的，使用bootstrap

Bootstrap 3半背景色

3 个答案: