html - 如何将块彼此等距放置？

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

最佳答案

如下图所示添加li并为jumbotron设置边距：0

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

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

关于html - 如何将块彼此等距放置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33013579/