11

也许我疯了，但没有办法摆脱 twitter 引导程序上的 20px 排水沟吗？例如，我使用了使用 alpha 和 omega 的框架，这些框架覆盖了排水沟，给它一个边距：0px；我目前在 twitter bootstrap 文档中没有看到类似的内容。

4

9 回答 9

9

使用引导程序，您不需要一个类来删除排水沟，它会被.row您span自动放置 div 的类删除，因此所有内容都很好地位于网格内。

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

一点澄清。

其他框架，例如 960.gs 网格，使用.alphaand.omega来删除网格左侧或右侧的多余边距，以便它们可以将网格元素很好地放置在一行中。使用引导程序不再是这种情况，因为网格有多余的边距被 div 删除，这是让您的div 很好地位于网格内所.row必需的。.span

于 2012-04-25T15:26:43.290 回答
3

更新：

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

如果要移除容器左右两端的排水沟，则必须为 .alpha 和 .omega 添加一个类。

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

如果要更改所有排水沟：

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

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

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

@gridGutterWidth: 20px;
于 2012-04-25T15:16:03.553 回答
3

只需从此处下载框架的自定义版本

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

并使 gridGutter = 0px

于 2013-03-18T06:57:29.843 回答
2

有同样的问题，这很好地解决了我的问题：

.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;
}
于 2014-05-15T07:42:13.123 回答
1

我知道这是一个老话题……但我敢肯定这对人们来说仍然是一个问题。我发现这个非常有用的 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

于 2014-05-29T02:18:52.053 回答
0

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

于 2013-01-30T11:08:27.470 回答
0 
body {
  margin-right: -15px;
  overflow-x: hidden;
}
于 2014-05-15T06:29:12.457 回答
0

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

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

然后修改（在 bootstrap.css 中）或覆盖 container-fluid 类：

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

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

于 2012-08-27T01:18:30.677 回答
0

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

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

并使用你的行<div class='row row-nogutter'>

如果这仍然不起作用，请尝试添加!important，但我不推荐它。

于 2014-05-22T17:16:29.580 回答