CSS 仅删除特定 div 的装订线空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16489307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove gutter space for a specific div only
提问by Techie
The default Bootstrap grid system utilizes 12 columns with each span having 30pxgutter as below. Gutters are the white space between columns.Gutter width seems to be between 20px- 30px. Let's assume it's 30pxhere.
默认的 Bootstrap 网格系统使用 12 列，每个跨度都有30px如下装订线。排水沟是列之间的空白区域。装订线宽度似乎介于20px-之间30px。让我们假设它在30px这里。
I want to remove the gutter space for a specific div, so that there will be no gutter space in the row. Each span will be next to each other with no gutter.
我想删除特定的装订线空间div，以便行中没有装订线空间。每个跨度将彼此相邻，没有排水沟。
The problem is if I remove the margin 30px(gutter) it leaves 360px(12 * 30px) at the end of the row.
问题是，如果我删除了30px它在行尾留下360px(12 * 30px)的边距（装订线）。
Given that I want to remove gutter space for a specific divonly. Let's assume that it's for divs which are in the main_contentdiv.
鉴于我只想删除特定的装订线空间div。让我们假设它用于divs 中的 s main_contentdiv。
div#main_content div{
/*
no gutter for the divs in main_content
*/
}
How can I remove the gutter for a specific divwithout loosing Bootstrap responsiveness and not leaving space at the end of the row?
如何在div不失去 Bootstrap 响应能力的情况下移除特定的排水沟，并且不会在行尾留出空间？
采纳答案by Dawson
For Bootstrap 3.0 or higher, see this answer
对于 Bootstrap 3.0 或更高版本，请参阅此答案
We're only looking at class .span1here (one column on a 12 wide grid), but you can achieve what you want by removing the left margin from:
我们在.span1这里只查看类（12 宽网格上的一列），但是您可以通过从以下位置删除左边距来实现您想要的：
.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive
Then changing .row-fluid .span1's width to equal to 100% divided by 12 columns (8.3333%).
然后将.row-fluid .span1的宽度更改为 100% 除以 12 列 (8.3333%)。
.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive
You may want to do this by adding an additional class that would allow you to leave the base grid system intact:
您可能希望通过添加一个额外的类来实现这一点，该类允许您保持基本网格系统不变：
.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>
You could repeat this pattern for all other columns, as well:
您也可以对所有其他列重复此模式：
.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 (insisting on using the default grid)
If the default grid system is a requirement, it defaults to a width of 940px (the .container and .span12 classes, that is); thus, in simplest terms, you'd want to divide 940 by 12. That equates to 12 containers 78.33333px wide.
* EDIT（坚持使用默认网格）
如果需要默认网格系统，则默认宽度为940px（即.container和.span12类）；因此，简单来说，您需要将 940 除以 12。这相当于 12 个 78.33333px 宽的容器。
So line 339 of bootstrap.css could be edited like so:
所以 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)
回答by Zim
Update 2018
2018 年更新
For Bootstrap 3, it's much easier. Bootstrap 3 now uses padding instead of margins to create the "gutter".
对于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;
}
Then just add no-gutterto any rows where spacing is to be removed:
然后只需添加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>
Demo: http://bootply.com/107708
Bootstrap 4 (no extra CSS needed)
Bootstrap 4（不需要额外的 CSS）
Bootstrap 4 includes a no-guttersclass that can be applied to the entire row:
Bootstrap 4 包含一个no-gutters可以应用于整个 的类row：
http://www.codeply.com/go/pVsGQZVVtG
http://www.codeply.com/go/pVsGQZVVtG
<div class="row no-gutters">
<div class="col">..</div>
<div class="col">..</div>
<div class="col">..</div>
</div>
There are also new spacing utilsthat enable control of padding/margins. So this can be used to change the padding (gutter) for a single column (ie: <div class="col-3 pl-0"></div>) sets padding-left:0;on the column, or use px-0to remove both the left and right padding (x-axis).
还有新的间距实用程序可以控制填充/边距。因此，这可以被用来改变填充（沟），用于单个列（即：<div class="col-3 pl-0"></div>）套padding-left:0;在柱，或使用px-0以除去左右填充（x轴）两者。
回答by Sherbrow
Update : link for TWBS 3 getbootstrap.com/customize/#grid-system
更新：TWBS3 的链接getbootstrap.com/customize/#grid-system
Twitter Bootstrap offers a customize formto download all or some components with custom configuration.
Twitter Bootstrap 提供了一个自定义表单来下载所有或一些具有自定义配置的组件。
You can use this form to download a grid without gutters, and it will be responsive - you only need the grid component and the responsive ones concerning the width.
您可以使用此表单下载没有装订线的网格，并且它会是响应式的——您只需要网格组件和有关宽度的响应式组件。
If you know a little about LESS, then you can include the generated CSS in a selector of your choice.
如果您对LESS有一点了解，那么您可以将生成的 CSS 包含在您选择的选择器中。
/* LESS */
.some-thing {
/* The custom grid
...
*/
}
If not, you should add this selector in front of each rule (not that much anyway).
如果没有，您应该在每个规则的前面添加这个选择器（无论如何都不要那么多）。
If you know LESS and use the LESS scripts to manage your styles, you might want to use directly the Grid mixins v2 (github)
如果您了解 LESS 并使用 LESS 脚本来管理您的样式，您可能想直接使用Grid mixins v2 (github)
回答by Michael
The total width is calculated with the width of the elements plus the width of the margin space. If you want to remove the margin space, that's fine, but to avoid that gap you mentioned, you also need to increase the width of the columns.
总宽度由元素的宽度加上边距空间的宽度计算。如果您想删除边距空间，那很好，但是为了避免您提到的间隙，您还需要增加列的宽度。
In this case, you need to increase the width of a single column by its removed margin space, which would be 30px.
在这种情况下，您需要通过删除的边距空间来增加单个列的宽度，即 30px。
So let's say your columns width is 50PX normally with 30PX margin space. Remove the margin space and make the width 80PX.
因此，假设您的列宽通常为 50PX，边距空间为 30PX。去除边距，使宽度为 80PX。
回答by Bass Jobsen
Example 4 columns of span3. For other span widths use new width = old width + gutter size. Use media queries to make it responsive.
span3 的示例 4 列。对于其他跨度宽度，使用新宽度 = 旧宽度 + 装订线尺寸。使用媒体查询使其响应。
css:
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:
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: or split a span12 div in 100/numberofcolumns % width parts floating left:
更新：或将 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>
For both solutions see: http://bootply.com/61557
对于这两种解决方案，请参见：http: //bootply.com/61557
回答by GaryP
Interesting...
有趣的...
Removing the gutter in Twitter Bootstrap's Default grid, that is, 940px wide. And that the default grid has a 940px wide container and has the bootstrap-responsive.css in it's stylesheet.
删除 Twitter Bootstrap 的默认网格中的装订线，即 940px 宽。并且默认网格有一个 940px 宽的容器，并且在它的样式表中有 bootstrap-responsive.css。
If I got your question right, this is how I did it...
如果我问对了你的问题，我就是这样做的......
<!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>
And the result is..
结果是..
The 4 div span with no gutter will remain spanned for Small tablet landscape (800x600). Anything size smaller than that will collapse the 4 divs and it will be stacked vertically. Of course you will have to tweak it to fit your needs.
对于小型平板电脑横向 (800x600)，没有装订线的 4 div 跨度将保持跨度。任何小于该尺寸的东西都会折叠 4 个 div，并将垂直堆叠。当然，您必须对其进行调整以满足您的需求。
回答by Gammer
Simplest way to remove padding and margin is with simple css.
删除填充和边距的最简单方法是使用简单的 css。
<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>
回答by Brainfeeder
Okay If you want to change the gutter inside one row, but want those (first and last) inner divs to align with the grid surrounding the .no-gutterrow, you could copy-paste-merge most answers into the following snippet:
好的如果您想更改一行内的装订线，但希望那些（第一个和最后一个）内部 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;
}
If you like to have a smaller gutter instead of completly none, just change the 0's to what you like... (eg: 5px to get 10px gutter).
如果你喜欢有一个更小的装订线而不是完全没有，只需将 0 更改为您喜欢的......（例如：5px 以获得 10px 装订线）。
回答by Stu
To add to Skelly's Bootstrap 3 no-gutter answer above (https://stackoverflow.com/a/21282059/662883)
添加到上面的 Skelly 的 Bootstrap 3 no-gutter 答案（https://stackoverflow.com/a/21282059/662883）
Add the following to prevent gutters on a row containing only one column (useful when using column-wrapping: http://getbootstrap.com/css/#grid-example-wrapping):
添加以下内容以防止仅包含一列的行出现装订线（在使用列包装时很有用：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;
}
