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

Question

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

我真正想做的是：

• 两列背景色。我添加了两列，但bootstrap容器和列类添加了填充和边距。
• 这些列中的内容必须采用正常的填充和边距。
• col之间必须没有空格/排水沟。
• 必须遵循bootstrap的破发点。

Answer 1

如果您在同一个<div>中有两个<row>，则无需更改本机Bootstrap中的任何内容即可实现此目的。只需将left和right类移至与col-xs-4 / col-xs-8相同的行。此外，您不应该<section>作为<container>的父级，您应该将其移动为容器的子级（虽然我将其删除，因为它似乎是不必要的）。

示例：

<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

Answer 2

像这样创建一个nopadding类：

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

如果将该类添加到列div中，则不会有填充。