Question

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

enter image description here

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

问题是，如果我移除了边距30px（装订线），则会在行尾留下360px（12 * 30px）。

鉴于我只想删除特定div的装订线空间。我们假设它是div main_content中的div。

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

如何在不失去Bootstrap响应性且不在行尾留空间的情况下删除特定div的装订线？

Answer 1

更新2018

对于 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

Bootstrap 4（无需额外的CSS）

Bootstrap 4包含一个no-gutters类，可以应用于整个row：

http://www.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轴）。

Answer 2

对于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 }

*编辑（坚持使用默认网格）
如果默认网格系统是必需的，则默认宽度为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)

Answer 3

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

的链接

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

您可以使用此表单下载没有排水沟的网格，它会响应 - 您只需要网格组件和响应宽度的响应。

Demo (jsfiddle) custom grid

如果您对LESS了解一点，那么您可以将生成的CSS包含在您选择的选择器中。

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

如果没有，你应该在每个规则前加上这个选择器（不管怎么说）。

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

Grid mixins v3 (github)

Answer 4

使用元素的宽度加上边距空间的宽度计算总宽度。如果你想删除边距空间，那很好，但为了避免你提到的那个空白，你还需要增加列的宽度。

在这种情况下，您需要通过删除的边距空间（单位为30px）来增加单个列的宽度。

因此，假设您的列宽通常为50PX，边距为30PX。删除边距空间并使宽度为80PX。

Answer 5

示例4 span3的列。对于其他跨度宽度，请使用新宽度=旧宽度+装订线尺寸。使用媒体查询使其具有响应性。

的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％width parts left left：

<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

Answer 6

...有趣

在Twitter Bootstrap的默认网格中删除装订线，即940px宽。默认网格有一个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>

结果是..

enter image description here

没有装订线的4 div跨度将保持跨越小平板电脑风景（800x600）。任何小于它的尺寸都会折叠4个div，它将垂直堆叠。当然，你必须调整它以满足你的需求。

Answer 7

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

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

Answer 8

好的如果你想更改一行内的装订线，但希望那些（第一个和最后一个）内部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排水沟）。

Answer 9

由于没有人提到过这一点，因此要添加到上面的无排水沟答案中，如果您想自定义间隔水沟，您要做的就是指定px值，以表示左右边距属性，并填充左右属性；

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

Answer 10

有趣...

删除 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>

Answer 11

添加到上面的Skelly's 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;
}

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

11 个答案: