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>

现在间距似乎很好但是当我把它包裹成一排（我想）时，右边的面板比横幅更溢出。

在小提琴上可以看得更清楚：http://www.bootply.com/gMBrLvaK5C

问题是'rightSide'面板。

如何在'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-*类。

Answer 2

首先，您需要遵循正确的行和列包装。如果您需要一致性，则需要确保将所有列包装成一行。

chbxStateChange

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

http://www.bootply.com/g6eLHRd1tH

Bootstrap - 在列之间给出小间距

2 个答案: