如何以等距離彼此放置塊？

我使用稱爲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類 –

如何以等距離彼此放置塊？

回答

相關問題