Question

有没有办法使用.container然后在里面有一个拆分2列布局，其中列具有不同的背景颜色，并一直到达页面的左右两侧？

以下正确居中并拆分为两列，但每个列的背景也会裁剪为容器的宽度。

<div class="container">
  <div class="col-sm-6">
    <p>Left content goes here.</p>
  </div>
  <div class="col-sm-6">
    <p>Right content goes here.</p>
  </div>
</div>

图片比文字效果更好： enter image description here

Answer 1

HTML

<div class="container-holder">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="gray-box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
                 <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.container-holder{
    overflow: hidden;
    background: white;
}
.gray-box{
    background: gray;
    padding: 0 15px 9999px 9999px;
    margin: 0 -15px -9999px -9999px;
}

jsfiddle DEMO

Answer 2

你可以做这样的事情，让你走上正确的轨道......

HTML

<div class="container">
  <div class="col-sm-6 grey">
    <p>Left content goes here.</p>
  </div>
  <div class="col-sm-6 white">
    <p>Right content goes here.</p>
  </div>
</div>

CSS

body {
    background: #808080; /* Old browsers */
    background: -moz-linear-gradient(left,  #808080 0%, #808080 50%, #ffffff 50%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#808080), color-stop(50%,#808080), color-stop(50%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to right,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    }
    .container {
      width:1024px;
    }
    .grey {
      background-color:grey;
    }
    .white {
      background-color:white;
    }

当它到达col-xs-12断点时，你必须使用媒体查询来控制身体背景。

Answer 3

在最近的项目中，我想出了如何在没有太多代码的情况下执行此操作。与Niket Thapa的答案类似，但更多地涉及结构。保持响应度并使用没有负边距和填充的自举类：

HTML

<div class="position-relative">
  <div class="container-fluid background-holder">
    <div class="row h-100">
      <div class="col-md-6 bg-primary">
        <p class="text-left">left split</p>
      </div>
      <div class="col-md-6 bg-warning">
        <p class="text-right">right split</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row text-center">
      <section class="col-md-6">
        <h1>left content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. Sed non scelerisque nulla. Sed pharetra lacus sapien, et condimentum
        ante condimentum non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce magna lorem, lacinia congue varius blandit, facilisis quis nulla. Maecenas eu finibus tortor, sed volutpat justo. Fusce pulvinar
      </section>
      <section class="col-md-6">
        <h1>right content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. diam at placerat consectetur. Aliquam nec nisl luctus, imperdiet
        dolor non, feugiat ligula.
      </section>
    </div>
  </div>
</div>

CSS

.background-holder {
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.container {
  border-left: 2px solid red;
  border-right: 2px solid red;
}

jsfiddle DEMO

具有全宽背景的Bootstrap .container，从中间分开？

3 个答案: