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

19

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

    
задан BrownChiLD 31.01.2014 в 15:42
источник
  • Ваш второй вопрос должен быть внесен в новый вопрос вместо прилагаемого здесь (теперь я его отредактировал) –  ZAD-Man 16.07.2014 в 20:04

4 ответа

23

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

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

    
ответ дан ZAD-Man 16.07.2014 в 20:12
2

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

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

    
ответ дан James 09.02.2014 в 22:54
0

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

    
ответ дан AndreFontaine 31.01.2014 в 15:50
0

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

/* 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%.

    
ответ дан ThatsRight 31.01.2014 в 16:22