如何以相等的距离放置块？

Question

我正在使用名为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;
}

Answer 1

如下所示添加li并为jumbotron设置margin：0

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

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