Col - * - 12 (col-xs/col-sm/etc) использовать в Bootstrap 3

В примерах кода в StackOverflow и в темах для продажи я вижу что-то вроде следующего: никогда (никогда в примерах Bootstrap).

<div class="container">
  <div class="row">
    <div class="col-xs-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

ИЛИ

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

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

enter image description here

Когда вы на самом деле используете сетку? Когда вступает в игру col-*-12?

Ответы

Ответ 1

Если что-то полно, вам это совсем не нужно.

enter image description here Узнайте: http://getbootstrap.com/examples/grid/

Правильный html для обоих приведенных выше примеров таков:

<div class="container">

       <p>Words go here</p>

      </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class -->

Если вы хотите, чтобы ваши столбцы были полными, он будет находиться под последним классом столбца, который вы использовали. Ниже будет полная ширина ниже, где начинается ширина столбца smm (поэтому 767px и UNDER при загрузке Bootstrap 3.x по умолчанию).

<div class="row">
    <div class="col-sm-4">
     Stuff
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-8">
     Stuff
    </div><!-- /.col-sm-8 -->
</div><!-- /.row -->

Не забудьте внешний контейнер .container-жидкость (по одному на группу содержимого, которая не меняет ширину). Контейнер .container или .container-fluid возвращает отрицательный запас на .row, поэтому вы не получите горизонтальные полосы прокрутки.

В ситуациях, когда вы используете col - * - 12, вы хотите получить полную ширину ПОСЛЕ минимальной ширины меньшего класса столбцов:

<div class="row">
    <div class="col-sm-6 col-md-12">
     Stuff
    </div><!-- /.col-sm-6 col-md-12 -->
  <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4">
     Stuff
   </div><!-- /.col-sm-6 col-md-12 -->
</div><!-- /.row -->

В любом случае, col - * - 12 пригодится в ситуациях гнездования, особенно с формами.

Ответ 2

Ваше разочарование правильно. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> полностью избыточно.

Поскольку Bootstrap 3+ является мобильным первым, любые классы col, которые вы объявляете, путешествуют, то есть они применяются к объявленному устройству (xs, sm, md, lg) и большему. Таким образом, col-xs-12 col-sm-12 является избыточным. Просто используйте col-xs-12 для того же эффекта.

Кроме того, если вы не объявляете класс xs, макет по умолчанию будет равен col - * - 12 один раз ниже класса coles smalles, который вы объявляете. например <div class="col-sm-6"> - полуширина на sm и вверх, но полная ширина на xs. В то время как <div class="col-md-6"> составляет половину ширины на md и вверх, но полную ширину на sm и xs.

При этом вы должны всегда объявлять хотя бы один класс col, поэтому он получает соответствующие дополнения и другие особенности стиля.