ブーストラップ梱包問題

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

あなたはdivにredと​​を配置する必要があります。このように：

グリッドシステムでは、この指示に従う必要があります。あなたのコードに基づいて

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>