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 сетки... но это, похоже, не работает. Что мне не хватает?
Ответы
Ответ 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%.