Twitter Bootstrap 3：行中的边距

Question

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

低于我的目标（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>

这给了我这个结果：

我已定义颜色以查看块：

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

如你所知，＆＃34; Favoris 1＆＃34; ＆安培; ＆＃34; Favoris 2＆＃34;。这两个块占用全宽而没有填充和边距。

如果您查看我的草稿，您可以看到通常它应该在这两个块之间具有标准边距，例如两列之间的标准空间，所以在我的情况下为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>

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;