如何以等距离彼此放置块？

我使用称为jumbotron的引导程序块，我无法让我的块适合行，因为这些块有自己的填充。我需要一行三个。当我尝试将它们与col-xs-3对齐时，它们看起来不成比例。如何做？提前致谢。如何以等距离彼此放置块？

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; 
}

来源

2015-10-08 Alexander Shmatko

我不认为你应该在超大屏幕类与山坳 – Jay

@Jay好地结合，最终我需要像[这里]（http://imgur.com/YkOqg8U ）。 –

这很好。但我有一个问题。你为什么使用jumbotron类？你是否有必要这样做？如果不是，那么我认为仅仅使用自己的列应该很好，以实现这一点。只要确保它们每行加起来就是12。 – Jay

添加Li和SE T保证金：0的超大屏幕

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

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

来源

2015-10-08 10:55:49

这是不是只是一个_hacky_方式形成严重的HTML？ – Jay

而不是李你可以使用div的。但是你不应该在.col- *类中添加include .jumbotron类 –

如何以等距离彼此放置块？

回答

相关问题