Question

这是我的挑战。该设计需要一个50-50分割的全宽行。每一半都是不同的颜色。好的，够容易的。其他行将是固定的.container宽度，有12列

在桌面上的每一半中，内容都符合固定的容器宽度，每个宽度为6列，大小为12，移动时为12。

我附上了PSD片。

这是我初步编写的代码。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <div class="container-fluid dualColour">
        <div class="row">
          <div class="col-xs-12 col-md-6 c1" style="background:red;">
            <div class="col-xs-12 col-md-6">
              <p>Copy example</p>
            </div>
          </div>
          <div class="col-xs-12 col-md-6 c2" style="background:green">
            <div class="col-xs-12 col-md-6">
              <p>Copy example</p>
            </div>
          </div>
        </div>
      </div>

我不确定如何让内容位于1170容器宽度内，没有大量的自定义CSS和HTML。

Answer 1

<div class="container-fluid">
<div class="row">
  <div class="col-xs-12 col-md-6">
    <div class="navy">
      <div class="content">
        <h2>Header 1</h2>
        <p>Copy example</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6">
    <div class="light">
      <div class="content">
        <h2>Header 2</h2>
        <p>Copy example</p>
      </div>
    </div>
  </div>
</div>
</div>

Answer 2

另一种无需太多代码的方法。正在处理更多结构。保持响应度并使用Bootstrap 4类：

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 3.container-fluid，50-50分割

2 个答案: