Нужно ли добавлять селектор col-md в Bootstrap 3?
Я попытался найти ответ на этот вопрос безрезультатно. В принципе, мне интересно, нужно ли указывать значение col-md- * в Bootstrap 3, или если вы можете просто использовать, скажем, col-xs-12 и col-sm- *, и иметь col-sm - * значение диктует размер столбца до некоторого массивного отображения.
Это кажется неинтересным (что наличие col-sm будет в порядке), но в документации есть, по-видимому, избыточные значения col-md- *, например, здесь (взятые из "Пример: мобильный, планшетный и рабочий стол" "в разделе" Grid System "в разделе CSS:
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
Любые разъяснения здесь будут очень признательны. Спасибо!
Ответы
Ответ 1
Ваша интуиция правильная, самое низкое значение, которое вы установили (xs, sm или md), будет определять для больших размеров экрана; это означает, что если вы хотите, чтобы ваш div занимал 4 столбца, начиная с небольших устройств, и вам нужно всего лишь установить .col-sm-4.
Он работает таким образом из-за того, как настроены медиа-запросы:
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-tablet) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-desktop) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... }
Если не переопределены, классы для небольших устройств будут применяться и к более крупным экранам.
