引導程序：由於文本大小導致佈局上的空白空間

每個項目都是一個文章，它們位於div的內部，但是當其中一個項目的文本較大時，它會在下一行創建一個空白空間。這些項目是動態創建的，所以我無法控制文本大小。

是我第一次使用Bootstrap，因此歡迎任何建議。

<div class="row margin-top-30"> 
    <article class="col-xs-12 col-sm-6 col-md-3">...</article> 
    <article class="col-xs-12 col-sm-6 col-md-3">...</article> 
    <article class="col-xs-12 col-sm-6 col-md-3">...</article> 
</div>

Image with the example

謝謝！

來源

2016-01-27 Ruben Maldonado

你想讓它變成什麼樣子？隱藏文字？顯示」...」？強制文本爲一行？請詳細說明 – Aziz

您對網格的使用似乎不正確。對於sm，您總共使用18個色譜柱，對於md，您使用的是9個色譜柱。 –

更好的解決方案及其對你，你不得不使用文本溢出省略號與項目的標題，然後所有框的大小將相等文本將只在一行中打破，所以我的事情對你來說是更好的你se文本溢出省略號框的標題。它也在瀏覽器中兼容。

text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden;

也許它會對你有幫助。

來源

2016-01-28 07:29:45

在四個元件的第二行，只需添加內嵌CSS：

style="margin-top:xxpx;"

調整餘量，直到第二行落入上述行下面。

來源

2016-01-27 23:25:32 Luke14

我想你可以通過指定CSS的min-height/max-height屬性來解決你的問題。如果遇到問題，也會處理溢出。

來源

2016-01-28 06:32:20

如果你的瀏覽器支持CSS3，你可以使用Flexbox的辦法來解決這個問題

<div class="row margin-top-30 flex-item-container" > 
    <article class="col-xs-12 col-sm-6 col-md-3 item">...</article> 
    <article class="col-xs-12 col-sm-6 col-md-3 item">...</article> 
    <article class="col-xs-12 col-sm-6 col-md-3 item">...</article> 
</div>

CSS

.flex-item-container{ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
}

如需更多信息，請參閱https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2016-01-28 07:12:46 urpalreloaded

引導程序：由於文本大小導致佈局上的空白空間

回答

相關問題