Twitter Bootstrap 3：行中的边距

Question

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

低于我的目标（970 像素容器、30 像素装订线、80 像素列的 photoshop 草稿）：

要使用 bootstrap3 编写此模板，我已定义此代码：

  <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" 之间没有边距。这 2 个块占据全宽，没有填充和边距。

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

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

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

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

非常感谢您的反馈。

Answer 1

这样做。请参阅整页 中的片段。列 不应 是 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>