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

问题出在 'rightSide' 面板上。

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

Answer 1

这是我个人的解决方案，不是在列上添加 class，而是在列内创建 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>

如果你想在列之间减少 space 你可以通过在列上添加一个 class 来改变填充来简单地覆盖 Bootstrap col-md-* class左和右。

Answer 2

首先，您需要遵循正确的行和列换行。如果你想要一致性，你需要确保所有列都换成一行。

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

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

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

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

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

然后将自定义边距和样式应用于列内的元素，而不是列本身。

http://www.bootply.com/g6eLHRd1tH

Bootstrap - 在列之间留出较小的间距

Bootstrap - Giving Small Spacing Between Columns

html

css

spacing

twitter-bootstrap