助推器包裝問題

Question

大家。我正在使用引導程序，我想要刪除紅色和綠色網格列之間的空間（請參閱iamge）。這是我的代碼。

<div class="col-xs-6" style='background: red;'> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aut ducimus ex consequuntur, illo ipsam unde esse reprehenderit placeat assumenda. 
</div> 
<div class="col-xs-6" style='background: orange;'> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto pariatur quidem numquam neque esse unde cumque. Reiciendis itaque libero nesciunt, autem est dolor. Placeat autem, voluptate ipsum delectus! Iure eius aliquam ut. Esse?Lorem ipsum dolor sit amet, 
</div> 

<div class="col-xs-6" style='background: green;'>> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto paria 
</div> 

我試圖把一個clearfix類，但它不工作。

want to remove the space between the red and green grid

Answer 1

可以在這樣的高柱使用pull-right ..

<div class="row"> 
    <div class="col-xs-6" style="background: red;"> 
     .. 
    </div> 
    <div class="col-xs-6 pull-right" style="background: orange;"> 
     .. 
    </div> 
    <div class="col-xs-6" style="background: green;">.. 
    </div> 
</div> 

http://codeply.com/go/TytIBOYFcb

注：這隻會專門爲此佈局工作。如果您有許多列高度可變的列，您需要採取以下方法：detailed in this question

Answer 2

你必須把red和​​在div。像這樣：

在網格系統中，你必須遵循這個指令，然後你會得到想要的結果。

Div 6 + Div 6 = Div 12 
In first Div 6: 
| red part | 
| green part | 

代碼解決方案基於代碼：

<div class="col-xs-6"> 

      <div class="row" style='background: red;'>   
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aut ducimus ex consequuntur, illo ipsam unde esse reprehenderit placeat assumenda.   
      </div> 

      <div class="row" style='background: green;'>> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto paria 
      </div> 
</div> 


<div class="col-xs-6" style='background: orange;'> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto pariatur quidem numquam neque esse unde cumque. Reiciendis itaque libero nesciunt, autem est dolor. Placeat autem, voluptate ipsum delectus! Iure eius aliquam ut. Esse?Lorem ipsum dolor sit amet, 
</div>