← Комьюнити

Вопрос

Николай Косыгин1 ответов
#bootstrap

У меня возник вопрос по 9 заданию.  прописал следующее:

<div class="container">
     <div class="col-md-7">
            <h3>Left block</h3>
     </div> 
     <div class="col-md-5">
            <h3>Right block</h3>
     </div>
</div>

Валидатор ошибку не показал. При проверке оказалось, что ответ не верный. Посмотрел правильный ответ. Переписал код. но когда открываешь в браузере, то выглядит идентично. Как правильный, так и не правильный код. До 992рх блоки расположены с лева и с права. После установки 991рх, блоки расположатся вертикально. Возникает вопрос. Зачем нужно прописывать .col-xm* .col-sm*?

1 ответов

Итак и так верно.

С помощью системы Grid System фреймворка Bootstap, задайте классы таким образом, чтобы при увеличении размера браузера (больше 992px), блоки выстроились один слева, другой справа. 

Больше 992px - это md.

<div class="container">
        <div class="col-md-8 col-xs-12 col-sm-12 color-left-block">
           <h3>Left block</h3> 
        </div>
        <div class="col-md-4 col-xs-12 col-sm-12 color-right-block">
           <h3>Right block</h3> 
        </div>
</div>

col-xs-12 col-sm-12 - это для меньших разрешений экрана, обозначает, что блоки будут вытягиваться на всю длину. 

Таблица разрешений с сеткой GRID:

https://getbootstrap.com/docs/3.3/css/#grid-example-basic

student_F3tCJLdd

Ваш ответ

Войдите, чтобы ответить