Bootstrap - неправильный столбец на экране

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) Я получаю значение окры-SM- * - почему? http://prntscr.com/an1097

Answer 1

Это потому, что для видовых экранов выше col-sm нет смещения столбца сверху вниз. Это означает, что ваша страница будет отображаться как шесть центральных столбцов с тремя смещениями столбцов - даже на больших экранах.

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

вам нужно будет добавить следующее (Col-MD-смещение-0) для каждого из родительских див, чтобы предотвратить смещение в -md и -lg и позволить два див отображать бок о боке :

<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>