默认的 Bootstrap 网格系统使用 12 列，每个跨度都有30px如下的排水沟。排水沟是列之间的空白区域。装订线宽度似乎介于20px-之间30px。让我们假设它在30px这里。
我想删除特定的装订线空间div，以便行中没有装订线空间。每个跨度将彼此相邻，没有排水沟。
问题是如果我删除它在行尾30px留下360px(12 * ) 的边距（装订线）。30px
鉴于我只想删除特定的装订线空间div。让我们假设它是 for divs 在main_content div.
div#main_content div{
/*
no gutter for the divs in main_content
*/
}
如何在div不失去 Bootstrap 响应能力且不在行尾留出空间的情况下移除特定的排水沟？
引导程序 5（2021 年更新）
Bootstrap 5 具有新的装订线类，专门设计用于调整整行的装订线。排水沟类可以响应式地用于每个断点（即gx-sm-4：）
g-0排水沟g-(1-5)通过间距单位调整水平和垂直间距gy-*调整垂直排水沟gx-*调整水平间距Bootstrap 4（不需要额外的 CSS）
Bootstrap 4 包含一个no-gutters可以应用于整个 的类row：
http://codeply.com/go/pVsGQZVVtG
<div class="row no-gutters">
<div class="col">..</div>
<div class="col">..</div>
<div class="col">..</div>
</div>
还有新的间距工具可以控制填充/边距。因此，这可用于更改列上的单个列（即：）<div class="col-3 pl-0"></div>集的填充（gutter） padding-left:0;，或用于px-0删除左右填充（x 轴）。
Bootstrap 3（原始答案）
对于Bootstrap 3来说，这要容易得多。Bootstrap 3 现在使用填充而不是边距来创建“装订线”。
.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;
}
然后只需添加no-gutter到要删除间距的任何行：
<div class="row no-gutter">
<div class="col-lg-1"><div>1</div></div>
<div class="col-lg-1"><div>1</div></div>
<div class="col-lg-1"><div>1</div></div>
</div>
对于 Bootstrap 3.0 或更高版本，请参阅此答案
我们只在.span1这里查看类（12 宽网格上的一列），但您可以通过从以下位置删除左边距来实现您想要的：
.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive
然后将.row-fluid .span1' 宽度更改为等于 100% 除以 12 列（8.3333%）。
.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive
您可能希望通过添加一个额外的类来做到这一点，该类允许您保持基本网格系统不变：
.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }
<div class="row-fluid show-grid">
<div class="span1NoGutter">1</div>
</div>
您也可以对所有其他列重复此模式：
.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }
* EDIT（坚持使用默认网格）
如果需要默认网格系统，则默认宽度为940px（即.container和.span12类）；因此，简单来说，您需要将 940 除以 12。这相当于 12 个 78.33333px 宽的容器。
所以 bootstrap.css 的第 339 行可以这样编辑：
.span1 { width:78.33333px; margin-left:0 }
or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)
更新：TWBS 3 getbootstrap.com/customize/#grid-system的链接
Twitter Bootstrap 提供了一个自定义表单来下载所有或部分具有自定义配置的组件。
您可以使用此表单下载没有装订线的网格，它将是响应式的 - 您只需要网格组件和与宽度有关的响应式组件。
如果您对LESS了解一点，那么您可以将生成的 CSS 包含在您选择的选择器中。
/* LESS */
.some-thing {
/* The custom grid
...
*/
}
如果没有，你应该在每条规则前面添加这个选择器（反正不是那么多）。
如果您了解 LESS 并使用 LESS 脚本来管理您的样式，您可能希望直接使用Grid mixins v2 (github)
总宽度是用元素的宽度加上边距空间的宽度来计算的。如果要删除边距空间，那很好，但是为了避免您提到的间隙，您还需要增加列的宽度。
在这种情况下，您需要将单个列的宽度增加其移除的边距空间，即 30 像素。
因此，假设您的列宽通常为 50PX，边距空间为 30PX。去掉边距，使宽度为 80PX。
span3 的示例 4 列。对于其他跨度宽度，使用新宽度 = 旧宽度 + 装订线尺寸。使用媒体查询使其响应。
CSS：
<style type="text/css">
@media (min-width: 1200px)
{
.nogutter .span3
{
margin-left: 0px; width:300px;
}
}
@media (min-width: 980px) and (max-width: 1199px)
{
.nogutter .span3
{
margin-left: 0px; width:240px;
}
}
@media (min-width: 768px) and (max-width: 979px)
{
.nogutter .span3
{
margin-left: 0px; width:186px;
}
}
</style>
html:
<div class="container">
<div class="row">
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
</div>
</div>
更新：或将 span12 div 拆分为 100/numberofcolumns % 宽度部分向左浮动：
<div class="row">
<div class="span12">
<div style="background-color:green;width:25%;float:left;">...</div>
<div style="background-color:yellow;width:25%;float:left;">...</div>
<div style="background-color:red;width:25%;float:left;">...</div>
<div style="background-color:blue;width:25%;float:left;">...</div>
</div>
</div>
对于这两种解决方案，请参阅：http ://bootply.com/61557
有趣的...
删除 Twitter Bootstrap 的默认网格中的装订线，即 940 像素宽。并且默认网格有一个 940px 宽的容器，并且在它的样式表中有 bootstrap-responsive.css。
如果我的问题是正确的，我就是这样做的...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stackoverflow Question</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-responsive.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
#main_content [class*="span"] {
margin-left: 0;
width: 25%;
}
@media (min-width: 768px) and (max-width: 979px) {
#main_content [class*="span"] {
margin-left: 0;
width: 25%;
}
}
@media (max-width: 767px) {
#main_content [class*="span"] {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 480px) {
#main_content [class*="span"] {
margin-left: 0;
width: 100%;
}
}
<!-- For Visual Aid Only -->
.bg1 {
background-color: #C2C2C2;
}
.bg2 {
background-color: #D2D2D2;
}
</style>
<body>
<div id="wrap">
<div class="container">
<div class="row-fluid">
<div class="span1 text-center bg1">01</div>
<div class="span1 text-center bg2">02</div>
<div class="span1 text-center bg1">03</div>
<div class="span1 text-center bg2">04</div>
<div class="span1 text-center bg1">05</div>
<div class="span1 text-center bg2">06</div>
<div class="span1 text-center bg1">07</div>
<div class="span1 text-center bg2">08</div>
<div class="span1 text-center bg1">09</div>
<div class="span1 text-center bg2">10</div>
<div class="span1 text-center bg1">11</div>
<div class="span1 text-center bg2">12</div>
</div>
<div id="main_content">
<div class="row-fluid">
<div class="span3 text-center bg1">1</div>
<div class="span3 text-center bg2">2</div>
<div class="span3 text-center bg1">3</div>
<div class="span3 text-center bg2">4</div>
</div>
</div>
</div><!--/container-->
</div>
</body>
</html>
结果是..
对于小型平板电脑横向 (800x600)，没有装订线的 4 div 跨度将保持跨度。任何小于该尺寸的东西都会折叠 4 个 div 并将其垂直堆叠。当然，您必须对其进行调整以适应您的需求。
删除填充和边距的最简单方法是使用简单的 css。
<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>
好的，如果您想更改一行内的装订线，但希望那些（第一个和最后一个）内部 div 与该.no-gutter行周围的网格对齐，您可以将大多数答案复制粘贴到以下代码段中：
.row.no-gutter [class*='col-']:first-child:not(:only-child) {
padding-right: 0;
}
.row.no-gutter [class*='col-']:last-child:not(:only-child) {
padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) {
padding-right: 0;
padding-left: 0;
}
如果您希望有一个较小的排水沟而不是完全没有，只需将 0 更改为您喜欢的...（例如：5px 以获得 10px 排水沟）。
由于没有人提到这一点，要添加到上面的 no-gutter 答案，如果你想要自定义间隔的装订线，你所要做的就是为 margin left 和 right 属性指定以 px 为单位的值，以及 padding left 和 right像这样的属性；
.row.no-gutter {
margin-left: 4px;
margin-right: 4px;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 4px;
padding-left: 4px;
}
有趣的...
删除 Twitter Bootstrap 的默认网格中的排水沟，100% 工作。在它以gx格式工作的行中使用g-0类
<div class="row g-0">
<div class="col-md-2 col-sm-4">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-1" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-2" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-3" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-4" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-5" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
`enter code here`
<header>
Rocket/Missile
</header>
<div class="product-serice-img-6" ></div>
</div>
</div>
添加到上面的 Skelly 的 Bootstrap 3 no-gutter 答案（https://stackoverflow.com/a/21282059/662883）
添加以下内容以防止在仅包含一列的行上出现装订线（在使用列换行时很有用：http: //getbootstrap.com/css/#grid-example-wrapping）：
.row.no-gutter [class*='col-']:only-child,
.row.no-gutter [class*='col-']:only-child
{
padding-right: 0;
padding-left: 0;
}