Нежелательное пустое пространство в сетке из 3 столбцов

#twitter-bootstrap #twitter-bootstrap-3

Вопрос:

У меня есть эта сетка, которая должна занимать всю ширину контейнера, но она продолжает добавлять ненужное пространство с левой и правой сторон. Я добавил границу вокруг областей: http://i.imgur.com/0FP64kK.png

Существует div-оболочка контейнера и 3 divs с col-lg-4.

Единственное, что пока работает, — это установить отрицательный запас в левом блоке, что, как я полагаю, не идеально.

Как убедиться, что используется вся ширина?

Ответ №1:

Если вы компилируете Bootstrap из less исходного кода, просто измените @grid-gutter-width переменную в variables.less на значение 0 . Оно распределяется со значением по умолчанию 30px .

Не просто изменяйте css файлы. В источнике есть 15 мест less , на которые @grid-gutter-width ссылаются, и на них затем ссылаются еще во многих местах — другими словами, переменная имеет далеко идущие последствия. Простое изменение скомпилированных css файлов неизбежно приведет к ухудшению общего стиля.

Ответ №2:

По умолчанию все «col» divs имеют отступы размером 15 пикселей слева и справа. Вы захотите изменить:

 .col-lg-4 {
    padding-left: 15px;
    padding-right: 15px;
    }

Для

 .col-lg-4 {
    padding-left: 0;
    padding-right: 0;
    }

1. Я согласен с @TimothyShields в том, что лучше не изменять CSS, вы можете создать новый класс, например col-lg-4-no-padding , но не изменять свои основные классы CSS

2. Я тоже полностью согласен. Мне следовало бы более четко сказать: создайте тот же класс в своем собственном файле стиля (который запускается после bootstrap.css), или вы, конечно, могли бы предоставить ему свой собственный класс, как предложил Дэн. Вам нужно будет обязательно скопировать атрибуты col-lg-4 при дублировании. Переопределение кода в вашем собственном файле стиля, как правило, чище и проще.

3. @user3711852 Даже если бы вы это сделали, все остальные стили начальной загрузки теперь были бы несовместимы с вашей модификацией. @grid-gutter-width используется во всех видах вычислений полей, отступов, интервалов, размеров и позиционирования. Если вы измените только эти два свойства .col-lg-4 класса — даже в отдельном файле, который является более чистым, — все остальные показатели все равно будут визуально несоответствующими.

4. Я понимаю. Спасибо за разъяснение @TimothyShields. Это гораздо более последовательно.