Bootstrap Col ширина

Question

Пожалуйста, сначала посмотрим на прилагаемом изображении

Я хочу 20% в первом столбце, но когда я использовал col-md-2, он установил width: 16.6667% , как я установил колонки 20% с помощью начальной загрузки. Нужно ли создавать свой собственный CSS или есть способ настроить bootstraps3

Answer 1

Система сетки Bootstrap основана в 12 колонках. Здесь официальный Doc Bootstrap http://getbootstrap.com/css/#grid

Col-мкр-2 означает, что вы хотите назначить 2/12 от общей ширины вашего контейнера, поэтому 16.6667%

Если вы хотите назначить 20 % вы можете добавить класс рядом с col-md-2, а не переопределить ширину или установить стиль в строке. Обратите внимание, что если вы установили 20%, это не кратно 12, поэтому близкие столбцы никогда не будут растягивать 100% ширины только с помощью бутстрапа.

Answer 2

Вы должны использовать пользовательские классы (простой способ) или настроить систему сетки Bootstrap.

Для создания пользовательского класса можно использовать что-то вроде:

.col-10p { 
    width: 100%; 
} 

.col-20p { 
    width: 100%; 
} 
@media screen and (min-width: 768px) { 

.col-10p { 
    width: 10%; 
    float: left; 
} 

.col-20p { 
    width: 20%; 
    float: left; 
} 
} 

Тогда вы получите 10% и 20% ширины контейнеров соответственно, и будет реагировать как Col-MD- * с. Они могут использоваться так же, как классы col - * - *.

Если вы используете customize Bootstrap или перезаписываете классы сетки по умолчанию, это повлияет на весь проект и сделает непреднамеренные результаты.

Как это можно переписать классы:

.col-md-2 { 
    width: 10% !important; 
} 

С помощью !important не хороший способ делать вещи: вы могли бы использовать другой подход, как:

.width-10.col-md-2 { 
    width: 10%; 
} 

, который даст вам желаемый эффект , Просто используйте класс width-10 в HTML тоже.