html - Bootstrap - 在列之间提供小间距

Question

我正在尝试调整从设计师那里获得的 Bootstrap 布局。内容中的两列间距很小，我无法通过直接列间距实现(因为它提供了太多间隙)。因此，我尝试将所有内容包装成一行并在我的主列中添加子列。在代码中，它更清楚:

<div class="container">
    <div class="col-md-12 banner"></div>

    <div class="row">
        <div class="col-md-8">
            <div class="col-md-12 leftSide">

            </div>
            <div class="col-md-12 leftSide">

            </div>
        </div>

        <div class="col-md-4 rightSide">
            <div class="col-md-12">

            </div>
        </div>
    </div>

</div>

现在间距看起来不错，但当我将它包裹成一行时(我认为)，右侧面板比横幅溢出更多。

在 fiddle 上可以看得更清楚:http://www.bootply.com/gMBrLvaK5C

问题是“右侧”面板。

如何保持“leftSide”和“rightSide”之间的间距，并修复右列的溢出(因为如果我尝试实现列间距，间距会变得太大)？或者实现该目标的最佳方法是什么？

Answer 1

这是我个人的解决方案，不是在列上添加类，而是在列内创建一个 div，然后你可以放置一个 div.banner 和 div.block 就像我的例子:

http://www.bootply.com/PEIiDnp9VD

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="banner"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="block"></div>
    </div>
    <div class="col-md-4">
      <div class="block"></div>
    </div>
  </div>
</div>

如果您希望列之间的空间更小，您可以通过在列上添加一个类来改变左右填充来简单地覆盖 Bootstrap col-md-* 类。