當我使用少於12個cols時，如何避免將Bootstrap列分成行？

Question

我正在嘗試將網站名稱+ 2圖片對齊爲我的網站標題。使用Bootstrap網格佈局，我可以很容易地用中等/大尺寸的設備來實現這一點。

| site-name              | | image1 | | image2 | 

然而，隨着小型設備，我的3個欄分解成3行和佈局是不是我想要的：

| site-name              | 
| image1 | 
| image2 | 

，因爲我只用3個小欄目，我想以適應他們在同一行，因爲他們只使用幾個像素。對於小屏幕的結果會是這樣的：

| site-name | | image1 | | image2 | 

我創建了一個Bootply demo。下面的代碼是迄今爲止我能做的最好的代碼。我已經嘗試過使用諸如.pull-right之類的東西來避免添加空白的8列，但結果是一樣的。

當前代碼：

<div class="row"> 
    <div class="col-sm-2"> 
    <h2>text1</h2> 
    </div> 

    <div class="col-sm-8"> 
    <!-- empty --> 
    </div> 

    <div class="col-sm-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 

    <div class="col-sm-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 
</div> 

Answer 1

這聽起來像你認爲的「小」的設備是什麼引導會考慮「額外小」。

這應該給你想要的效果：

<div class="row"> 
    <div class="col-xs-4 col-sm-2"> 
    <h2>text1</h2> 
    </div> 

    <div class="hidden-xs col-sm-8"> 
    <!-- empty --> 
    </div> 

    <div class="col-xs-4 col-sm-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 

    <div class="col-xs-4 col-sm-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 
</div> 

您可能需要加強的所有類到下一個大小，得到你想要的東西（例如，「COL-SM-4 COL-MD-1 「）

Answer 2

這是因爲您已經使用了col-sm，而不是col-xs（這更適用於手機等小屏幕）。

試試這個：

<div class="row"> 
    <div class="col-xs-2"> 
    <h2>text1</h2> 
    </div> 

    <div class="col-xs-8"> 
    <!-- empty --> 
    </div> 

    <div class="col-xs-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 

    <div class="col-xs-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 
</div> 

或者這樣：

<div class="row"> 
    <div class="col-xs-10"> 
    <h2>text1</h2> 
    </div> 

    <div class="col-xs-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 

    <div class="col-xs-1"> 
    <img src="http://placehold.it/60x60"> 
    </div> 
</div> 

你可以在這裏讀了很好的解釋：

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap