Question

我希望在一个col-*-6中有两个.row。左col有background-color，必须一直到屏幕的左边框。第一个col中也有文字，必须与普通.container对齐。右col有background-image，必须一直到屏幕的右边框。

here is a image example of I want to achieve. 这是我当前的代码，没有所有不必要的元素：

<div class="container-fluid">
  <div class="row no-gutter">
    <div class="col-md-6 text">
      <h2>Lorem ipsum dolor sit amet, consectetur elit, sed do lorem ipsum.</h2>
    </div> <!-- close col-md-6 text -->
    <div class="col-md-6 image" id="slided01">
    </div> <!-- close col-md-6 image -->
  </div> <!-- close row -->
</div><!-- close container-fluid -->

上述代码的问题在于，由于.container-fluid，文本与屏幕左侧对齐。我希望文本与正常.container宽度对齐。

这是JsFiddle。第一行是我想要的背景，第二行是我想要文本的方式。

Answer 1

您可以将container-fluid绝对定位在container下，并使用CSS来保持两个容器的高度相同。

.abs {
  position: absolute;
  top: 0;
  left:0;
  z-index:-1;
  bottom:0;
  right:0;
  min-height:100%;
}

http://www.codeply.com/go/pLKx5nEZF6

Answer 2

尝试这个（它不是地球上最兼容的代码，但它是CSS解决方案/没有JS /）

.break-container{
  width:100vw;
  position:relative;
  left:calc(-1 * (100vw - 100%)/2);
}

https://jsfiddle.net/vencedor/aq9Laaew/24452/

Bootstrap，打破容器中的一列

2 个答案: