Bootstrap расположение на более низком разрешении

Question

я следующий код:

<div class="row"> 
    <div class="col-sm-2"> 
     <input style="width:100%" > 
    </div> 
</div> 

И Fiddle: Sample

На моем разрешение по умолчанию: 1920x1080 изменение количества колонок (кол-см-2) будет изменить ширина ввода текста. Но на 1024x768 ширина всегда является целым столбцом, независимо от настройки col-sm-xx. Может кто-нибудь объяснить, почему это происходит?

Благодаря

Answer 1

Bootstrap следует простое правило т.е. MOBILE FIRST

Это означает, что если вы просто предоставить col-xs-?? тогда это становится приоритетом, и любой номер предоставляется здесь будет предоставляться все выше размера экрана, если специально не предусмотрено.

Похожий в случае col-sm-??, следовательно, он не будет влиять на xs экрана, но будет влиять на md и lg экранов, если таковые не предусмотрены отдельно.

Таким образом, то, что происходит, это просто изобразить свойство BootStrap.

приоритет CSS: хз> см> мкр> LG

Именно поэтому рекомендуется при написании CSS

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

Надеюсь, что он отвечает на ваш вопрос.

Answer 2

Бутстраповское подвесная система разбита на 12 столбцов.

12 столбцов представляют собой всю страницу.

подвесная система

бутстрапа имеет четыре класса, в зависимости от размера вашего устройства

• хза: Используются для смартфонов
• см: Используется для таблеток
• мДа: Это используется для настольных компьютеров
• Л.Г.: используется для больших рабочих столов

важно отметить, что каждый класс масштабируется. Например, чтобы использовать ту же ширину как для смартфонов, так и для планшетов, вам просто нужен col-xs-xx класс

В вашем случае col-sm-2 представляет два из 12 столбцов на экране. Другими словами, он всегда будет занимать одну шестую часть экрана.

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

Ресурс

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 3

класс вы используете, col-sm-2 будет занимать 1/6-ой (2/16) доступной ширины до ваша ширина окна меньше 768px wide. Более подробная информация о поддержке точек останова и устройства здесь:

https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system