Question

也许我疯了但是没有办法摆脱Twitter bootstrap上的20px排水沟？例如，我使用了使用alpha和omega的框架来覆盖排水沟给它一个边距：0px;我目前没有在twitter bootstrap文档中看到这样的内容。

Answer 1

使用引导程序，您不需要一个类来移除装订线，它会被.row类删除，您可以自动放置span div，这样一切都可以很好地放在网格中。

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

稍作澄清。

其他框架（例如960.gs网格）使用.alpha和.omega来移除网格左侧或右侧的多余边距，以便它们可以很好地位于网格元素内一条线。使用引导程序时不再是这种情况，因为网格有.row div删除了多余的边距，这需要让.span div很好地位于网格中。

Answer 2

更新：

在文档中也没有看到任何内容，但这是一个修复：

如果要删除容器左右两端的装订线，则必须为.alpha和.omega添加一个类。

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

如果你想改变所有的排水沟：

在variables.less文件中，您可以更改装订线宽度：

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

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

@gridGutterWidth: 20px;

Answer 3

从这里下载框架的自定义版本

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

并使gridGutter = 0px

Answer 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;
}

Answer 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 Source - http://bootply.com/109530

Answer 6

您可以将内容放入容器流体div：

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

然后修改（在bootstrap.css中）或覆盖容器流体类：

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

boostrap-responsive.css具有相同的类，因此您可以为移动屏幕与桌面屏幕设置不同的边距。

Answer 7

最好在960.gs框架中添加类似于alpha和omega的自定义样式。

Answer 8

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

Answer 9

尝试将此添加到自定义css：

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

使用<div class='row row-nogutter'>

之类的行

如果仍然无效，请尝试添加!important，但我不推荐。

在Twitter Bootstrap中摆脱Gutter

9 个答案: