ブートストラップ - 画面上の間違った列

Question

サムネイルで簡単な投稿リストを作成します。
私はこのコードを作成しました：

   <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3"> 
        <div class="row"> 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
          <div class="news"> 
           <div class="news-thumb text-center"> 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
           </div> 
           <div class="news-excerpt"> 
            <p> 
             Content 
            </p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3"> 
        <div class="row"> 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
          <div class="news"> 
           <div class="news-thumb text-center"> 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
           </div> 
           <div class="news-excerpt"> 
            <p> 
             Content 
            </p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

が、FullHDの

（1920px）私は* COL-SM-の値を取得する - なぜ？ http://prntscr.com/an1097

Answer 1

これは、col-smの上にあるビューポートの上にオーバーライディング列のオフセットがないためです。つまり、大きな画面であっても、3つの列がオフセットされた6つの中央の列としてページが表示されることを意味します。

<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3"> 

あなたは-MDと-LGにオフセットし、2つのdivを並べて表示できるようにすることを防止するために、親のdiv要素のそれぞれに、下記（COL-MD-オフセット-0）を追加する必要があります。 ：

<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0"> 

は、私はこれをテストし、それが動作するようになりましたし、並んで列側を表示 - 列が隣接しており、小さなウィンドウでは、それらは縦に積み重ねる - フルスクリーンモードで（アクションのコードスニペットを見てください。ポイントを示すために色付きの背景を追加しました。

\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 

 
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red"> 
 
        <div class="row"> 
 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
 
          <div class="news"> 
 
           <div class="news-thumb text-center"> 
 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
 
           </div> 
 
           <div class="news-excerpt"> 
 
            <p> 
 
             Content 
 
            </p> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:blue"> 
 
        <div class="row"> 
 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
 
          <div class="news"> 
 
           <div class="news-thumb text-center"> 
 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
 
           </div> 
 
           <div class="news-excerpt"> 
 
            <p> 
 
             Content 
 
            </p> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div>