Подтвердить что ты не робот

Bootstrap 3 grid, задает 1 размер столбца для всех дисплеев

В bootstrap v3 размеры столбцов объявляются для разных размеров экрана.

<div class='container'>
    <div class='row'>
        <div class='col-md-6 col-lg-6 col-sm-6'>

Я часто нахожу, что мне просто нужен 1 размер для всех типов дисплеев.. и я думал, что это будет что-то вроде

        <div class='col-6'>

где независимо от того, какой размер дисплея пользователь включен, просто сохраните ширину столбца 6/12 сетки... но это, похоже, не работает. Что мне не хватает?

4b9b3361

Ответ 1

Правильный ответ для этих размеров - <div class='col-sm-6'>. Как было предложено другими ответами, это применимо ко всему, чем оно больше.

Существует четвертый размер, однако xs, поэтому использование <div class='col-xs-6'> будет применяться ко всем возможным размерам.

Ответ 2

Я не тестировал это, поэтому может быть неправильно. Я помню, что проблема с col-lg-8 работала, но когда экран стал средним, все изменилось. Меняя класс на col-md-8, он работал для обоих.

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

Ответ 3

Попробуйте просто: <div class="col-md-6">? Потому что я думаю, что в бутстрапе нет класса col-6.

Ответ 4

Префикс xs/sm/md/lg находится на том, что точки останова привязаны к полной ширине. Вы можете увидеть точки останова здесь: http://getbootstrap.com/css/#grid

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Итак, вы должны иметь возможность использовать col-xm-6, так как он не имеет точки останова, или вы можете создать свой собственный класс с шириной 50%.