html - Bootstrap 3、容器结构的2列流体容器

Question

我正在尝试创建一个 container-fluid 容器，该容器具有用于背景颜色/图像需求的两列结构，其中包含一个 container 类。容器类在那里是为了让内容与非 container-fluid 类容器保持一致。与两种背景颜色的全宽列结构对齐是我的目标。

这是我正在尝试创建的可视化示例。

请参阅下面的代码以了解我到目前为止的尝试...

.flex { display: flex; }

.container-fluid { background: #fff; }
  .container-fluid .col-sm-6:last-of-type { background: #000; color: #fff; }

  .container-fluid .container { width: initial; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p>This is a container class. The content below should align with this containers content.</p>
    </div>
  </div>
</div>


<div class="container-fluid">
  <div class="row flex">
  
    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h4>Column 1</h4>
            <p>This content needs to align with the container class above.</p> 
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h4>Column 2</h4>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>

Answer 1

每个 row 类添加一个 -15px margin-left 和 margin-right 也每个 col-* 类类添加了一个15px padding-left 和padding-right。这些需要正确匹配。我还删除了似乎会增加错位的偏移类。如果您需要相同的内容，请将其添加回来。希望此解决方案适合您。

.flex {
  display: flex;
}

.container-fluid {
  background: #fff;
}
.container-fluid .col-sm-6:last-of-type {
  background: #000;
  color: #fff;
}

.container-fluid .container {
  width: initial;
}

<link
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  rel="stylesheet"
/>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <p>
        This is a container class. The content below should align with this
        containers content.
      </p>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row flex">
    <div class="col-xs-10 col-sm-6">
      <div class="row container">
        <h4>Column 1</h4>
        <p>
          This content needs to align with the container class above.
        </p>
      </div>
    </div>

    <div class="col-xs-10 col-sm-6">
      <div class="container row">
        <h4>Column 2</h4>
      </div>
    </div>
  </div>
</div>