ブートストラップ3 |列の内容は他の列を押し下げます

Question

私はブートストラップに2つのサイドボックスを持つコンテンツボックスを作成しようとしましたが、この問題が発生しました。

大きなコンテンツボックスのコンテンツが長すぎると、2番目のサイドボックスがプッシュダウンされます。

私はカスタムのグリッドスタイリングなしでプレーンなブートストラップ3を使用しています。

<div class="container"> 

<div class="row"> 

<div class="col-md-8"> 
</div> 

<div class="col-md-offset-1 col-md-3"> 
</div> 

<div class="col-md-offset-9 col-md-3"> 
</div> 

</div> 

</div> 

私の目標と実際に何が得られているかを視覚化するための2つのスクリーンショットです。事前に

My goal

What i'm getting

ありがとう！

Answer 1

ブートストラップのグリッド単位は、パーセンテージに基づいています。各ユニットは8.33％の幅（100％の1/12）です。これが理由です

.col-md-8 = 66.67パーセント

.col-md-offset-1.col-md-3 = + 25％8.33パーセント

66.67 + 8.33 + 25 = 100％

：あなたの最初の2つのdiv.col sが100％幅まで追加します3番目のdiv.colは新しい '行'にラップされます。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-8"></div> 
    <div class="col-md-offset-1 col-md-3"> 
     <div class="row"> 
     </div class="col-xs-12"></div> 
     </div class="col-xs-12"></div> 
     </div><!-- .row --> 
    </div><!-- .col --> 
    </div><!-- .row --> 
</div><!-- .container --> 

：

columns can be nestedので、これは私があなたの問題を解決する方法をあります