В чем разница между col-lg и col-md в bootstrap3

Ответ 1

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

.col-xs= * Дополнительные небольшие устройства (например, телефоны) (< 768px)

.col-sm= Маленькие устройства (например, планшеты) (≥768px)

.col-md= средние устройства (например, ноутбуки или небольшие настольные компьютеры) (≥992px)

.col-lg= большие устройства (например, настольные компьютеры) (≥1200px) *

Таким образом, посредством медиа-запросов вы можете позволить иметь только нужные классы, интерпретируемые браузером. Например, если вы просматриваете этот веб-сайт с помощью планшета, вы увидите, что свойства css, которые фактически применяются в браузере, являются только те, для класса .col-sm.

UPDATE

Также важно отметить, что эти классы используются в сетке из 12 столбцов, что является установкой системы сетки, используемой Bootstrap.

Поэтому, когда вы используете .col-sm-4 для элемента, это означает, что элемент будет принимать 4 столбца из 12 общей ширины. Что логически означает, что если используется .col-sm-4, то только 3 элемента на строку могут вписаться в страницу на планшете.

Например, скажем, мы хотим показать некоторые карты проектов для портфеля:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
    <div class="card-wrapper">  
        <img src="img.jpg">
        <div class="overlay-text">
            <h5>Project 1</h5>
            <div class="labels">
                <label>Tech Stack</label>
                <h6>HTML5, CSS, JS</h6>
            </div>       
        </div>          
    </div> 
</div> 

Использование class="col-xs-12 col-sm-6 col-md-4 col-lg-3" все одновременно используется для активации различных свойств CSS для элемента при просмотре страницы на определенном устройстве.

Иными словами, если пользователь открывает сайт на рабочем столе, col-lg-3 означает, что будет отображаться в общей сложности 4 карты, когда col-md-4 means в общей сложности 3 карты, col-sm-6 в общей сложности 2 карты и то col-xs-12 означает, что только на одной только 1 карте будет со 100% шириной страницы.

Ответ 2

Все эти теги xs, sm, md и lg являются частью сетки Bootstrap. Система сетки Bootstrap позволяет использовать до 12 столбцов на странице. Система сетки Bootstrap реагирует, и столбцы будут переупорядочиваться в зависимости от размера экрана. На большом экране может выглядеть лучше с содержимым, организованным в три столбца, но на маленьком экране было бы лучше, если бы элементы контента были сложены друг на друга.

Совет. Помните, что столбцы сетки должны содержать до двенадцати строк. Более того, столбцы будут складываться независимо от области просмотра.

Правила сетевой сетки

Некоторые правила системной сетки Bootstrap:

• Строки должны быть размещены в пределах .container (фиксированная ширина) или .container-fluid (полная ширина) для правильного выравнивания и заполнения
• Используйте строки для создания горизонтальных групп столбцов.
• Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк
• Предопределенные классы, такие как .row и .col-sm-4, доступны для быстрого создания макетов сетки.
• Столбцы создают водосточные желоба (промежутки между содержимым столбца) через отступы. Это дополнение смещается в строках для первого и последнего столбцов через отрицательный запас на .rows
• Сетки решетки создаются путем указания числа из 12 доступных столбцов, которые вы хотите развернуть. Например, три равных столбца будут использовать три .col-sm-4

Я бы рекомендовал пройти эту ссылку и далее связал страницы для лучшего понимания.

Ответ 3

Они добавили все эти классы для одной сетки столбцов в этом шаблоне, потому что эти классы соответствуют небольшим, маленьким, средним и большим устройствам столбца.

.col-xs = *Extra small devices (ie Phones) (<768px)

.col-sm = Small devices (ie Tablets) (≥768px)

.col-md = Medium devices (ie laptops, or small desktops) (≥992px)

.col-lg = Large devices (ie Desktops) (≥1200px)*