Bootstrap Grid — большие устройства

Пример Bootstrap Grid: большие устройства

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

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

Совет. Под большими устройствами понимаются устройства с шириной экрана от 1200 пикселей и выше .

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

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

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

Следующий пример приведет к разделению 25%/75% на небольших устройствах, разделении 50%/50% на средних устройствах и разделении 33%/66% на больших устройствах:

Использование только больших

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