Bootstrap: Изменение размера сетки

Question

У меня есть контейнер рядов, который я бы хотел сделать контейнер больше. По умолчанию bootstrap имеет значение 1200 пикселей. Я думал, что, изменив col-md-4 на что-то вроде col-lg-4, он расширит сетку, но это не для меня. Есть ли способ расширить сетку?

Answer 1

Если вы не хотите путаться с меньшими переменными и просто хотите увеличить размер своего контейнера ... убедитесь, что ваша пользовательская таблица CSS CSS вызывается после загрузки css-бутстра, чтобы она не была переопределена, а затем используйте простой CSS разметки в таблице стилей, таких как

@media (min-width: 1200px) { 
.container{ 
    width: 1400px; 
} 

вы можете даже использовать мин-ширина/макс-ширина свойств, или как Benja отметил, вы можете также использовать контейнер-жидкость, чтобы максимизировать емкость на полную ширину окна просмотра.

Answer 2

Перейдите в меню Customize на сайте Bootstrap и выберите нужный размер. В Less Variables -> Grid system вы можете найти форму для ввода нужных вам размеров. Затем вы можете легко загрузить предпочтительную сетку. Надеюсь, это поможет.

Answer 3

Вы можете использовать <div class="container-fluid"> для контейнера, который будет использовать всю ширину вашего окна просмотра.

Answer 4

Средний срок в col-XX-num соответствует размеру экрана, который приведет к «перерыву» в вашей сетке, чтобы элементы в сетке были отзывчивыми. Например, div с классом col-sm-4 займет 4 из 12 ячеек сетки по умолчанию Bootstrap row до тех пор, пока не будет отмечен размер «малого» экрана (в «Bootstrap» «small» определяется как 750px). Read more about the Bootstrap grid.

Если вы хотите изменить width бутстрапного container, использовать этот CSS:

.container{ 
    max-width: 1900px; 
} 

Это сделает контейнер шире, но не будет делать сетки больше. Сетка Bootstrap заблокирована на 12 ячеек в строке. Когда вы используете класс col-md-4, как вы указали в своем примере, вы сообщаете Bootstrap, чтобы этот элемент занял 4 из возможных 12 ячеек в этой строке.

Возможно, вы добьетесь желаемого результата, чтобы ваши столбцы занимали меньше ячеек. Что-то вроде col-md-2, то вы можете использовать что-то вроде col-md-offset-2, чтобы разместить столбец внутри строки, если это необходимо.

Надеюсь, это поможет!