Twitter Bootstrap: нет поля между столбцами
Я хочу удалить поля между промежутками в бутстрапе.
Одной из идей было бы просто перезаписать свойства css с нулевым запасом и дополнением.
Вот пример: http://jsfiddle.net/kKEpY/3/
Без исключения, что левый столбец будет плавать вправо, он будет работать, но я предпочел бы прямое бутстрап-решение. Таким образом, bootstrap предоставляет свойство, которое очищает поля столбцов (span-fluid)?
Привет
Ответы
Ответ 1
Обновить: ниже приведенное решение относится к старой версии (< 2.1): поскольку v2.1 сетка жидкости автоматически вычисляется из нормальных размеров сетки - см. variables.less on github
Чтобы получить тот же результат, установите @gridGutterWidth в 0 и установите @gridColumnWidth и @gridColumns по своему усмотрению.
Там, установка
-
@fluidGridColumnWidth до 8.333333333% и
-
@fluidGridGutterWidth to 0%
вы можете получить что (jsfiddle).
Предупреждение: генератор, похоже, устанавливает правила на основе ваших переменных и по умолчанию (которые я удалил по jsfiddle).
Ответ 2
У меня была такая же проблема, как и у вас, поэтому здесь, как я получил это в последней версии Bootstrap 2.3.1:
Сначала вам нужно добавить класс "без пробела" в родительский div с классом "row" следующим образом:
<div class="row-fluid no-space">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
Затем вы изменяете свой css в соответствии с количеством элементов, которые вы хотите в этой строке, например:
.no-space [class*="span"]{
margin-left: 0 !important;
width: 25% !important; // This is for 4 elements ONLY in the row
}
Математика для ширины:
100 / number of elements in the row = width.
В моем случае это было 4 элемента, так это:
100 / 4 = 25%;
Если бы это было 3 элемента, это было бы:
100 / 3 = 33.3333333333%;
Если у вас есть несколько случаев в проекте с этой проблемой, вы можете добавить уникальный код или класс в правило css, чтобы он не повлиял на всех.
Что это. Не нужно повторно загружать загрузочный файл и обрабатывать исходные файлы
PS: Этот метод также работает в гибком дизайне;)
Ответ 3
Выше ответы действительно полезны, но мой сценарий немного отличается.
У меня есть div span4 и span8 в html, код html выглядит следующим образом:
<div class="row">
<div class="span4">Content of span4</div>
<div class="span8">Content of span8</div>
</div>
![enter image description here]()
Чтобы сделать это, я должен не только переписать margin-left на 0, но также должен настроить ширину span4 и span8. Итак, вот код, который работает для меня:
.no-space [class*="span"]{
margin-left: 0 !important;
&.span8{
width: 75%;
}
&.span4{
width: 25%;
}
}
Спасибо за вдохновение!
Ответ 4
Я хотел использовать диапазон с маржи и диапазоном без полей в своем HTML. При использовании меньше это очень просто. Просто создайте свой собственный файл меньше, назовите его что-то вроде "no-margin-span.less" и включите его где-нибудь в меньший код. После этого вы можете использовать "no-margin-span5" вместо "span5" в вашем html файле. Это работает так же, как, например, "no-margin-offset5" и "offset5". Файл "no-margin-span.less" должен иметь следующий код:
#grid {
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.no-margin-spanX (@index) when (@index > 0) {
(~"[email protected]{index}") { .no-margin-span(@index); }
(~'[email protected]{index}:first-child') { .no-margin-spanFirstChild(@index); }
.no-margin-spanX(@index - 1);
}
.no-margin-spanX (0) {}
.no-margin-offsetX (@index) when (@index > 0) {
(~'[email protected]{index}') { .no-margin-offset(@index); }
.no-margin-offsetX(@index - 1);
}
.no-margin-offsetX (0) {}
.no-margin-offset (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
.no-margin-span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth;
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%));
}
.no-margin-spanFirstChild (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
.row-fluid {
[class*="no-margin-span"] {
.input-block-level();
float: left;
margin-left: 0;
}
// generate .no-margin-spanX and .no-margin-offsetX
.no-margin-spanX (@gridColumns);
.no-margin-offsetX (@gridColumns);
}
}
}
РЕДАКТИРОВАТЬ. Чтобы этот код реагировал, добавьте следующий код в файл "no-margin-span.less" :
@media (max-width: 767px) {
// Make all grid-sized elements block level again
[class*="no-margin-span"],
.uneditable-input[class*="no-margin-span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"],
[class*="no-margin-span"]:first-child,
.uneditable-input[class*="no-margin-span"]:first-child, // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"]:first-child {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.no-margin-span12,
.row-fluid .no-margin-span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
// FORM FIELDS
// -----------
// Make no-margin-span* classes full width
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="no-margin-span"],
select[class*="no-margin-span"],
textarea[class*="no-margin-span"],
.uneditable-input {
.input-block-level();
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
.input-append input,
.input-prepend input[class*="no-margin-span"],
.input-append input[class*="no-margin-span"] {
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
.controls-row [class*="no-margin-span"] + [class*="no-margin-span"] {
margin-left: 0;
}
}
