仅删除特定 div 的装订线空间答案

【问题标题】：Remove gutter space for a specific div only仅删除特定 div 的装订线空间
【发布时间】：2013-05-05 13:17:54
【问题描述】：

默认的 Bootstrap 网格系统使用 12 列，每个跨度具有 30px 排水沟，如下所示。 装订线是列之间的空白。装订线宽度似乎在20px - 30px 之间。我们假设这里是30px。

我想删除特定div 的装订线空间，以便该行中没有装订线空间。每个跨度将彼此相邻，没有排水沟。

问题是，如果我删除边距 30px（装订线），它会在行尾留下 360px (12 * 30px)。

鉴于我只想删除特定 div 的装订线空间。假设它是针对divs 的main_contentdiv。

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

如何删除特定 div 的装订线，而不会失去 Bootstrap 响应能力并且不会在行尾留出空间？

【问题讨论】：

你能告诉我我的第一个解决方案有什么问题吗？见：bootply.com/61557
Bootstrap 3 在 v3.4.0 中引入了 row-no-gutters。见getbootstrap.com/docs/3.4/css/#grid-remove-gutters。在这种情况下，只将该类添加到您不希望有装订线的特定行。另见stackoverflow.com/questions/21254889/…（可能重复）

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

有趣...

删除 Twitter Bootstrap 的默认网格中的装订线， 100% 工作。在它以 g-x

格式工作的行中使用 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>

【讨论】：

【解决方案2】：

引导程序 5（2021 年更新）

Bootstrap 5 具有新的gutter classes，专门用于调整整行的装订线。可以为每个断点响应式地使用排水沟类（即：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>

还有新的spacing utils 可以控制填充/边距。因此，这可用于更改单个列的填充（即：<div class="col-3 pl-0"></div>）在列上设置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>

演示：http://bootply.com/107708

【讨论】：

为了使其正常工作，您还应该添加.row.no-gutter { margin-left:0;margin-right:0; }
除了删除装订线之外，我发现减少装订线会使表单更具可读性。我有一个 5px 和 10px 的课程。一个问题是嵌套行需要使用相同的填充，否则它们的列不会对齐。如有必要，这可能会在 CSS 中处理。
非常感谢！我一直在摸索如何摆脱那个排水沟空间。我想我应该检查一下源代码，但 CSS 不是我的强项。无论如何，非常非常有用！
其实是.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { margin-left: 0; margin-right: 0; }
如果您希望间距仅应用于该行的直接后代，我建议将第二组选择器更改为 .row.no-gutter > [class*='col-']:not(:first-child), .row.no-gutter > [class*='col-']:not(:last-child)。

【解决方案3】：

由于没有人提到这一点，要添加到上面的 no-gutter 答案，如果您想要自定义间距的装订线，您所要做的就是以 px 为边距左右属性和填充指定值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;
}

【讨论】：

【解决方案4】：

好的，如果您想更改一行内的装订线，但希望那些（第一个和最后一个）内部 div 与 .no-gutter 行周围的网格对齐，您可以将大多数答案复制粘贴到以下 sn -p：

.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 装订线）。

【讨论】：

【解决方案5】：

对于 Bootstrap 3.0 或更高版本，see this answer

我们在这里只查看.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.33333 像素宽的容器。

所以 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)

【讨论】：

很好的解决方案，问题是关于默认网格，您将流体行添加到此网格。如果没有低于 768 像素的媒体查询，您的列不会堆叠。
这看起来确实是个不错的选择。我开始使用类似的方法并在这里使用它：bootply.com/61110 - 看起来宽度百分比仍然需要一些调整。
@skelly 为什么让你 span3 的宽度是 24.99% 而不是 25%？
@-skelly bootply 的宽度有点偏，但我认为它们看起来“偏”的最大原因是文本左对齐。添加 text-align:center 可以清除它。但就像@Bass Jobsen 一样，我没有看到 24.99% 和 25% 的好处。高中的数学题证明了 .999999 == 1 无论如何（希望我能记住方程式）。
@BassJobsen -- Bootstrap 也有一个流体网格。我假设 OP 正在使用该部分，只是试图消除排水沟。

【解决方案6】：

删除填充和边距的最简单方法是使用简单的 css。

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>

【讨论】：

【解决方案7】：

更新：TWBS 3 getbootstrap.com/customize/#grid-system的链接

Twitter Bootstrap 提供 customize form 以下载所有或部分具有自定义配置的组件。

您可以使用此表单下载没有装订线的网格，它将是响应式的 - 您只需要网格组件和与宽度相关的响应式组件。

Demo (jsfiddle)

如果您对LESS 有所了解，则可以将生成的 CSS 包含在您选择的选择器中。

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

如果没有，你应该在每条规则前面添加这个选择器（反正不是那么多）。

如果您了解 LESS 并使用 LESS 脚本来管理您的样式，您可能希望直接使用 Grid mixins v2 (github)

Grid mixins v3 (github)

【讨论】：

【解决方案8】：

添加到上面 Skelly 的 Bootstrap 3 简洁答案 (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;
}

【讨论】：

不需要使用选择器两次...？

【解决方案9】：

以 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

【讨论】：

【解决方案10】：

有趣...

删除 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 并将其垂直堆叠。当然，您必须对其进行调整以满足您的需求。

【讨论】：

【解决方案11】：

总宽度是元素的宽度加上边距空间的宽度。如果您想删除边距空间，那很好，但是为了避免您提到的那个间隙，您还需要增加列的宽度。

在这种情况下，您需要将单个列的宽度增加其移除的边距空间，即 30 像素。

假设您的列宽通常为 50PX，边距空间为 30PX。去掉边距，使宽度为 80PX。

【讨论】：