ブートストラップ使用時のDivsレイアウト

Question

以下の図に示すように、2つのdivを並べて使用します。 I want

ただし、画面の幅が大きくなると、レイアウトはこのようになります。ここでは Actual すると、コードは次のとおりです。
このを通して私を助けることができる任意のマスターはありますか？ ありがとう、ありがとう。

.Frank-row 
 
     { 
 
      border: 2px solid green; 
 
     } 
 
     
 
     .Frank-left 
 
     { 
 
      border: 2px dotted red; 
 
     } 
 
     
 
     .Frank-right 
 
     { 
 
      border: 2px dotted orange; 
 
     }

<div class="container-fluid" > 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 Frank-row" > 
 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-left" > 
 
        <p>left</p> 
 
        <p>left</p> 
 
        <p>left</p> 
 
        <p>left</p> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-offset-sm-6 col-md-offset-6 col-lg-offset-6 Frank-right" > 
 
        <p>right</p> 
 
        <p>right</p> 
 
        <p>right</p> 
 
        <p>right</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

ここでの問題のカップル。まず、このレイアウトを実現するためにラッパーdivは必要ありません。

第2に、あなたのdivにoffsetのクラスがあり、これを次の行にプッシュします。これらのクラスを削除するとレイアウトが修正されました。

here

Answer 2

ちょうどCOL-オフセット部分を除外例を参照してください！

.Frank-row { 
 
    border: 2px solid green; 
 
} 
 

 
.Frank-left { 
 
    border: 2px dotted red; 
 
} 
 

 
.Frank-right { 
 
    border: 2px dotted orange; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-left"> 
 
     <p>left</p> 
 
     <p>left</p> 
 
     <p>left</p> 
 
     <p>left</p> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-right"> 
 
     <p>right</p> 
 
     <p>right</p> 
 
     <p>right</p> 
 
     <p>right</p> 
 
    </div> 
 
    </div> 
 
</div>

リサイズテストするためのフィドル： https://jsfiddle.net/xt41kj6j/

Answer 3

があなたのファイルにbootstrap.cssを含めると、col-xs-12ので、フランク行のdivの内側の2つのdivにCOL-XS-12を削除classが他のcol - ** class CSS値よりも優先されます。

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-6 col-md-6 col-lg-6 Frank-left"> 
     <p>left</p> 
     <p>left</p> 
     <p>left</p> 
     <p>left</p> 
    </div> 
    <div class="col-sm-6 col-md-6 col-lg-6 Frank-right"> 
     <p>right</p> 
     <p>right</p> 
     <p>right</p> 
     <p>right</p> 
    </div> 
    </div> 
</div>