Twitter bootstrap 3 Twitter引导程序3：行中的边距

我从Bootstrap3开始，我已经有一些问题了。让我解释一下原因

低于我的目标（用于970px容器、30px排水沟、80px列的photoshop草稿）：

要使用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>

福利斯1
福利斯2
福利斯3

这给了我这个结果：

我已定义了用于查看块的颜色：

• 绿色：左栏
• 金色：右栏

正如您所看到的，“Favoris 1”和“Favoris 2”之间没有空白。这两个块采用全宽，没有填充和边距

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

我尝试为它们中的每一个定义（Favoris 1：右边距：15px和Favoris 2：左边距：15px），但这些块的宽度不会根据此边距定义进行更新

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

所以我希望你能帮我找到解决这个问题的方法

---

非常感谢您的反馈。

像这样做。请参阅整页中的片段。列不应是

列-*-*

的子元素。列应始终位于

行中

<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>


福利斯1
福利斯2
实施1
福利斯3
非常感谢！这正是我所期望的！我还需要努力才能更好地理解bootstrap；o） 很乐意帮忙。祝你学习顺利！通读网格的基础知识，很快就会变得非常简单：）