如何将块放置在彼此相等的距离？答案

【问题标题】：How to place blocks at equal distance from each other?如何将块放置在彼此相等的距离？
【发布时间】：2016-01-05 22:41:01
【问题描述】：

我正在使用称为 jumbotron 的引导程序块，但我的块无法放入行中，因为这些块有自己的填充。我需要一排三个。当我尝试将它们与 col-xs-3 对齐时，它们看起来不成比例。怎么做？提前致谢。

Jsfiddle

HTML

<div class="container">
  <ul class="events">
    <div class="row">

        <li class="col-xs-4 jumbotron">
          some text
        </li>

        <li class="col-xs-4 jumbotron">
          some text
        </li>

        <li class="col-xs-4 jumbotron">
          some text
        </li>

        <li class="col-xs-4 jumbotron">
          some text
        </li>

        <li class="col-xs-4 jumbotron">
          some text
        </li>

        <li class="col-xs-4 jumbotron">
          some text
        </li>

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

CSS

.container {
    margin: 30px 60px;
    border: solid;
}

.row {
    margin: 8px 0;
}

.events {
    list-style: none;
    padding: 0;
}

.jumbotron {
    margin: 10px;
}

【问题讨论】：

我认为您不应该将 jumbotron 类与 col 结合使用
@Jay 好的，最终我需要this 之类的东西。
没关系。不过我有一个问题要问你。你为什么使用 jumbotron 类？你必须这样做吗？如果不是，那么我认为只使用自己的列应该可以实现这一目标。只需确保它们在每行中加起来为 12。
尝试减少容器、行和 jumbotron 的填充和边距
这个问题解决了吗？

标签： html twitter-bootstrap css grid

【解决方案1】：

如下添加li并为jumbotron设置margin:0

<li class="col-xs-4">
    <div class="jumbotron">some text</div>
</li>

.jumbotron {
    margin:0;
    padding:20px;
}

【讨论】：

这不只是一种 hacky 方法来解决格式不正确的 html 吗？
你可以使用 div 而不是 li。但是你不应该添加包含 .jumbotron 类和 .col-* 类