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

68

默认的Bootstrap网格系统使用12列，每个跨度具有30px以下装订线。装订线是列之间的空白。装订线宽度似乎介于20px-之间30px。让我们假设它在30px这里。

在此处输入图片说明

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

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

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

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

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

css  twitter-bootstrap  bootstrap-4 
— 技术员
source
您能告诉我第一个解决方案出什么问题吗？参见：bootply.com/61557
— Bass Jobsen
row-no-guttersv3.4.0中引入的Bootstrap 3 。请参阅getbootstrap.com/docs/3.4/css/#grid-remove-gutters。在这种情况下，仅将该类添加到您不想有装订线的特定行中。另请参见stackoverflow.com/questions/21254889/…（可能重复）
— dyve

Answers:

36

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

*编辑（坚持使用默认网格）
如果需要默认网格系统，则默认宽度为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)
— 道森
source
好的解决方案，问题是关于默认网格，您将流体行添加到该网格。没有低于768像素的媒体查询，您的列就不会堆叠。
— 巴斯·乔布森
这看起来确实是一个不错的选择。我开始了一种类似的方法，并在这里使用它：bootply.com/61110-看起来宽度百分比仍然需要一些调整。
— Zim
@skelly为什么让span3的宽度为24.99％，而不是25％？
— 巴斯·乔布森
@ -skelly的bootply的宽度略有偏离，但是我认为它们看起来“偏离”的最大原因是文本左对齐。添加text-align：center可以清理掉它。但是像@Bass Jobsen一样，我看不到24.99％对25％的收益。高中时是否有数学证明证明了.999999 == 1（希望我能记住方程式）。
— 道森
@BassJobsen-Bootstrap也具有流体网格。我以为OP正在使用该部分，并且只是在尝试消除装订线。
— 道森
142

更新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>

还有一些新的间隔工具，可以控制填充/边距。因此，这可以被用来改变填充（沟），用于单个列（即：<div class="col-3 pl-0"></div>）套padding-left:0;在柱，或使用px-0以除去左右填充（x轴）两者。

— 齐姆
source
2
为了.row.no-gutter { margin-left:0;margin-right:0; }
— 使它
除了消除装订线之外，我发现减少装订线可以使表格更具可读性。我有一个5px和10px的类。一个陷阱是嵌套的行需要使用相同的填充，否则它们的列将无法对齐。如有必要，可以在CSS中进行处理。
— 亨里克
谢谢大家！我一直在努力摆脱如何摆脱排水沟的问题。猜猜我应该检查过源代码，但是CSS不是我的强项。无论如何，非常非常有用！
— 克里斯·西里菲斯
2
实际上是.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { margin-left: 0; margin-right: 0; }
— 5ulo 2014年
如果希望将装订线仅应用于行的直接后代，建议将第二组选择器更改为.row.no-gutter > [class*='col-']:not(:first-child), .row.no-gutter > [class*='col-']:not(:last-child)。
— 2015年
5

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

Twitter Bootstrap提供了一个自定义表单，可通过自定义配置下载所有或某些组件。

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

演示（jsfiddle） 自定义网格

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

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

如果不是，则应在每个规则之前添加此选择器（无论如何不要添加）。

如果您知道LESS并使用LESS脚本来管理样式，则可能需要直接使用Grid mixins v2（github）

Grid Mixins v3（github）

— Sherbrow
source
2

总宽度是用元素的宽度加上边距空间的宽度来计算的。如果要删除页边空白，那很好，但是要避免您提到的间隙，还需要增加列的宽度。

在这种情况下，您需要增加单个列的宽度，以其删除的边距空间为30px。

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

— 麦可
source
1

示例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>

update：或将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

— 巴斯·乔布森
source
0

有趣...

删除Twitter Bootstrap的“默认”网格中的装订线，即940px宽。并且默认网格具有940px宽的容器，并且在样式表中具有bootstrap-sensitive.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格，无排水沟。小于此尺寸的任何尺寸都会折叠4个div，并垂直堆叠。当然，您必须对其进行调整以满足您的需求。

— 加里
source
0

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

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

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

— 脑喂食器
source
0

由于没有人提到过这一点，因此要添加到上面有效的无排水沟答案中，如果您要自定义间隔排水沟，那么您要做的就是为px左右边距属性指定值（以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;
}
— 塞缪尔·伊西里玛（Samuel Isirima）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.