html - 如何使用 bootstrap 3.2.0 完成以下设计？

Question

我需要设计下图中第一个的东西，不应该有左或右填充。

我真正想做的是:

• 具有背景颜色的两列。我添加了两列，但 Bootstrap 容器和列类添加了填充和边距。
• 这些列中的内容必须采用正常的填充和边距。
• 各列之间不得有空格/间距。
• 必须遵循 bootstrap 的断点。

Answer 1

如果您有两个 <div>，则无需更改 native Bootstrap 中的任何内容即可实现此目的在同一个<row> .只需移动您的 left和 right将类放入与 col-xs-4 相同的行中/col-xs-8 .你也不应该有 <section>作为您 <container> 的 parent ，您应该将其移动为容器的子级(尽管我在下面删除了它，因为它似乎没有必要)。

例子:

<div class="container"> //change this to container-fluid if you want full screen width 
  <div class="row">
    <div class="col-xs-4 left">
    </div>
    <div class="col-xs-8 right">
    </div>
  </div>
</div>

JS Fiddle Demo