Twitter Bootstrap 3：行边距

Question

我从 Bootstrap 3 开始，我已经遇到了一些问题。让我解释一下原因。

低于我的目标（970px 容器的 Photoshop 草稿，30px 装订线，80px 列）：

为了用 bootstrap 3 编写这个模板，我定义了这个代码：

  <div class="row">
            <!-- LEFT COLUMN -->
            <div class="col-md-6" id="colonne_gauche">
                <section class="col-md-12">
                    <div class="row">
                        <!-- FAVORIS 1 -->
                        <article class="col-md-6" id="div-favorite-1">
                            <h2>Favoris 1</h2>
                        </article>

                        <!-- FAVORIS 2 -->
                        <article class="col-md-6" id="div-favorite-2">
                            <h2>Favoris 2</h2>

                        </article>
                    </div>
                </section>
            </div>

            <!-- RIGHT COLUMN -->
            <div class="col-md-6" id="colonne_droite">
                <section class="col-md-12">
                    <div class="row">
                        <!-- FAVORIS 3 -->
                        <article  id="div-favorite-3">
                            <h2>Favoris 3</h2>
                        </article>
                    </div>
                </section>
            </div>

        </div>

这给了我这个结果：

我已经定义了颜色来查看块：

• 绿色：左栏
• 金：右栏

如您所见，“Favoris 1”和“Favoris 2”之间没有边距。这两个块采用全宽，没有填充和边距。

如果你看一下我的草稿，你会发现通常这两个块之间应该有一个标准边距，等于两列之间的标准间距，所以在我的例子中是 30px。

我尝试为它们中的每一个进行定义（Favoris 1：margin-right:15px 和 Favoris 2：margin-left:15px），但这些块的宽度并未根据此边距定义进行更新。

我的目标是得到这个结果，当然不需要在 CSS 文件中定义这些块的宽度：

所以我正在寻求您的帮助以找到解决此问题的方法。

非常感谢您的反馈。

Answer 1

这样做。查看 sn-p 完整页面。列不应是col-*-* 的子元素。列应始终位于.row。

<div class="row">
  <!-- LEFT COLUMN -->
  <div class="col-md-6" id="colonne_gauche">
    <div class="row">
      <!-- FAVORIS 1 -->
      <section class="col-md-6">
        <article id="div-favorite-1">
          <h2>Favoris 1</h2>
        </article>
      </section>
      <!-- FAVORIS 2 -->
      <section class="col-md-6">
        <article id="div-favorite-2">
          <h2>Favoris 2</h2>
        </article>
      </section>
    </div>
    <div class="row">
      <!-- ACTUALITE 2 -->
      <section class="col-md-12">
        <article id="div-actualite-1">
          <h2>Actualite 1</h2>
        </article>
      </section>
    </div>
  </div>

  <!-- RIGHT COLUMN -->
  <div class="col-md-6" id="colonne_droite">
    <div class="row">
      <!-- FAVORIS 3 -->
      <section class="col-md-12">
        <article id="div-favorite-3">
          <h2>Favoris 3</h2>
        </article>
      </section>
    </div>
  </div>
</div>

#colonne_gauche {
  background-color: green;
}
#colonne_droite {
  background-color: yellow;
}
#div-favorite-1,
#div-favorite-2,
#div-favorite-3,
#div-actualite-1 {
  color: #fff;
  min-height: 200px;
}
#div-favorite-1 {
  background-color: blue;
}
#div-favorite-2 {
  background-color: orange;
}
#div-favorite-3 {
  background-color: red;
}
#div-actualite-1 {
  background-color: purple;
}
h2 {
  padding: 0;
  margin: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <!-- LEFT COLUMN -->
  <div class="col-md-6" id="colonne_gauche">
    <div class="row">
      <!-- FAVORIS 1 -->
      <section class="col-md-6">
        <article id="div-favorite-1">
          <h2>Favoris 1</h2>
        </article>
      </section>
      <!-- FAVORIS 2 -->
      <section class="col-md-6">
        <article id="div-favorite-2">
          <h2>Favoris 2</h2>
        </article>
      </section>
    </div>
    <div class="row">
      <!-- ACTUALITE 2 -->
      <section class="col-md-12">
        <article id="div-actualite-1">
          <h2>Actualite 1</h2>
        </article>
      </section>
    </div>
  </div>

  <!-- RIGHT COLUMN -->
  <div class="col-md-6" id="colonne_droite">
    <div class="row">
      <!-- FAVORIS 3 -->
      <section class="col-md-12">
        <article id="div-favorite-3">
          <h2>Favoris 3</h2>
        </article>
      </section>
    </div>
  </div>
</div>