Bootstrap Grid — средние устройства

Пример Bootstrap Grid: средние устройства

В предыдущей главе мы представили пример сетки с классами для небольших устройств. Мы использовали два div (столбца) и разделили их на 25%/75%:

Но на средних устройствах дизайн может быть лучше в виде разделения 50%/50%.

Совет. Средними устройствами считаются устройства с шириной экрана от 992 до 1199 пикселей .

Для средних устройств мы будем использовать .col-md-*классы.

Теперь добавим ширину столбцов для средних устройств:

Теперь Bootstrap скажет: «При небольшом размере посмотрите на классы с -sm- и используйте их. При среднем размере посмотрите на классы с -md- и используйте их».

Следующий пример приведет к разделению 25 %/75 % на небольших устройствах и 50 %/50 % на средних (и больших) устройствах. На очень маленьких устройствах он будет автоматически складываться (100%):

Использование только среды

В приведенном ниже примере мы указываем только .col-md-6класс (без .col-sm-*). Это означает, что средние и большие устройства будут разделены 50%/50%, потому что класс масштабируется. Однако для небольших устройств он будет располагаться вертикально (100% ширины):

В следующей главе показано, как добавить другой процент разделения для больших устройств.