Bootstrap - 在列之间提供小间距答案

【问题标题】：Bootstrap - Giving Small Spacing Between ColumnsBootstrap - 在列之间提供小间距
【发布时间】：2017-06-01 19:58:17
【问题描述】：

我正在尝试调整从设计师那里获得的 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”之间的间距，并修复右列的溢出（因为如果我尝试用列实现间距，间距会变得太大）？或者实现这一目标的最佳方法是什么？

【问题讨论】：

标签： html css twitter-bootstrap spacing

【解决方案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-* 类。

【讨论】：

左侧已关闭。 :S 我不想改变横幅的大小（这会导致左侧的大小也变大）。这不是我想要的。我想要实现的是使右侧面板的右侧更小。
是的...如果从 leftSide 删除 padding-left 有效...我会再试一次
您还可以将margin-left: -15px; 添加到.leftSide 类。见here
@zgood 是的，但扩大空间是我不想实现的。我想保持左面板和右面板的间距不变，而不是扩大它们。这首先是我的问题。我还尝试将margin-left: -15px 添加到右侧，但不起作用。这是fiddle
@Leandro 据我了解，更改默认大小是不合理的。不过谢谢你的时间:)

【解决方案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

【讨论】：