Избавиться от Gutter в TwitterBootstrap

Может быть, я сумасшедший, но не существует способа избавиться от 20px желоба в twitter bootstrap? Например, я использовал фреймворки, которые используют альфу и омегу, которые перекатывают желоб, чтобы дать ему преимущество: 0px; В настоящее время я не вижу ничего подобного в документации по загрузке twitter.

Ответ 1

С помощью бутстрапа вам не нужен класс для удаления желоба, он удаляется классом .row, где вы автоматически помещаете свои div span, чтобы все было хорошо расположено внутри сетки.

.row {
    margin-left: -20px;
}

Немного разъяснений.

Другие фреймворки, такие как сетка 960.gs, используют .alpha и .omega, чтобы удалить лишний запас слева или справа от сетки, чтобы они могли хорошо сидеть с элементами сетки внутри линии. С помощью бутстрапа это уже не так, поскольку сетка имеет избыточный запас, удаленный div .row, который необходим для того, чтобы ваши div .span хорошо сидели внутри сетки.

Ответ 2

ОБНОВЛЕНИЕ:

Не вижу ничего в документации, но вот исправление:

Если вы хотите удалить желоб на левом и правом концах вашего контейнера, вам нужно будет добавить класс для .alpha и .omega.

.alpha { margin-left: 0; }
.omega { margin-right: 0; }

Если вы хотите изменить все желоба:

В файле variables.less вы можете изменить ширину желоба:

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------

@gridGutterWidth: 20px;

Ответ 3

Просто загрузите пользовательскую версию фреймворка здесь

http://twitter.github.com/bootstrap/customize.html#variables

и сделайте gridGutter = 0px

Ответ 4

Если бы та же проблема, это разрешило это для моего довольно приятного:

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Ответ 5

Я знаю, что это старая тема... но я уверен, что это все еще проблема для людей. Я нашел этот очень полезный CSS, который решил его для меня. Наслаждайтесь!

/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:0;
}

/* only for column content visible */
.col-lg-1>div {background-color:#ddd;}

Источник CSS - http://bootply.com/109530

Ответ 6

Вы можете поместить свое содержимое в контейнер-жидкость div:

<div class='container-fluid'>
...
</div>

И затем измените (в bootstrap.css) или переопределите класс контейнер-жидкость:

.container-fluid {
    padding-left: 0px;
    margin-left: -20px;
  }

boostrap-responsive.css имеет один и тот же класс, поэтому вы можете устанавливать разные поля для мобильных экранов или экранов рабочего стола.

Ответ 7

Лучше добавить пользовательский стиль, похожий на альфа и омегу, в инфраструктуру 960.gs.

Ответ 8

body {
  margin-right: -15px;
  overflow-x: hidden;
}

Ответ 9

Попробуйте добавить это к своему пользовательскому css:

.row-nogutter {
    margin-right: 0;
    margin-left: 0;
 }

И используя вашу строку, например <div class='row row-nogutter'>

Если это все еще не работает, добавьте !important, но я не рекомендую его.