Bootstrap - 如何使單個div內容不響應？

Question

我正在學習如何基於bootstrap構建網頁，但我在嘗試在較小的屏幕上並排保留兩個元素時遇到了一些麻煩。
特別是，我有6種元素（A，B，C，d，E，F）和我想達到以下結果：

桌面屏幕：
AB
CD
EF

手機屏幕：
一個
乙
CD
Ë
˚F

我對A，B，E和F沒有任何問題（我使用過類col-xs- *），但是我無法找到一種方法來保持C和D始終並排。

你能幫我嗎？ :)

PS我的代碼與此類似：

<div class="content"> 
    <div class="row"> 
     <div class="col-xs-2">a</div> 
     <div class="col-xs-2">b</div> 
    </div> 
    <div class="row"> 
     <div>c</div> 
     <div>d</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-2">e</div> 
     <div class="col-xs-2">f</div> 
    </div> 
</div> 

Answer 1

你只需要在每個斷點指定的列寬：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6">A</div> 
     <div class="col-xs-12 col-sm-6">B</div> 
     <div class="col-xs-6">C</div> 
     <div class="col-xs-6">D</div> 
     <div class="col-xs-12 col-sm-6">E</div> 
     <div class="col-xs-12 col-sm-6">F</div> 
    </div> 
</div> 

要在代碼中使用它，它是這樣的：

<div class="content"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6">a</div> 
     <div class="col-xs-12 col-sm-6">b</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6">c</div> 
     <div class="col-xs-6">d</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6">e</div> 
     <div class="col-xs-12 col-sm-6">f</div> 
    </div> 
</div> 

Answer 2

帶自舉的系統相當簡單..有4種默認的屏幕尺寸。 xs（小於768像素），sm（768像素及以上），md（992像素及以上）和lg（1200像素及以上）。您可以爲每個尺寸設置不同的寬度，並相應地進行換行。您可以爲每個尺寸的屏幕應用一個col-class，使其適合調整大小。文檔對此非常有用。見http://getbootstrap.com/css/#grid

你的代碼應該是這樣的。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6">a</div> 
     <div class="col-xs-12 col-md-6">b</div> 
     <div class="col-xs-6">c</div> 
     <div class="col-xs-6">d</div> 
     <div class="col-xs-12 col-md-6">e</div> 
     <div class="col-xs-12 col-md-6">f</div> 
    </div> 
</div> 

你也可以爲每兩行放一個行類。