col - * - 12 (col-xs/col-sm/etc) use in Bootstrap 3

Question

В примерах кода на 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 и здравого смысла.

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

Answer 1

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

ЖЖ: 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 или .container-fluid возвращает отрицательный запас на .row, поэтому вы не получите горизонтальные полосы прокрутки.

Ситуации, когда вы используете цв - * - 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 --> 

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

Answer 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, поэтому он получает соответствующие дополнения и другие особенности стиля.