blocks|key|1808081|text|使用bootstrap，您不需要一个类来删除间隔，它由.row类删除，您可以在其中自动放置span+div，以便所有内容都可以很好地放置在网格中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1808082|.row+{
++++margin-left:+-20px;
}|code-block|syntax|javascript|1808083|稍微澄清一下。|1808084|其他框架，如960.gs网格，使用.alpha和.omega删除网格左侧或右侧的多余边距，以便它们可以将网格元素很好地放置在一条线内。有了bootstrap，情况就不再是这样了，因为网格已经通过.row+div删除了多余的边界，这是让您的.span+div很好地位于网格中所必需的。|1808085|entityMap^0|R|4|19|4|0|0|0|H|6|O|6|2P|4|3B|5|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$]]

With the bootstrap you don't need a class to remove the gutter, it is removed by the <code>.row</code> class where you place your <code>span</code> divs automatically so everything sits nicely within the grid.

<pre><code>.row {
 margin-left: -20px;
}
</code></pre>

A little clarification.

The other frameworks, such as the 960.gs grid, use an <code>.alpha</code> and <code>.omega</code> to remove the excess margin on the left or right of a grid so they can sit the grid elements nicely within a line. With the bootstrap this is not the case anymore since the grid has that excess margin removed by the <code>.row</code> div, which is required to have your <code>.span</code> divs sit nicely within the grid.

blocks|key|2374402|text|更新：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2374403|在文档中也看不到任何东西，但这里有一个修复方法：|2374404|如果要删除容器左右两端的间隔，则必须为.alpha和.omega添加一个类。|2374405|.alpha+{+margin-left:+0;+}
.omega+{+margin-right:+0;+}|code-block|syntax|javascript|2374406|如果要更改所有间距，请执行以下操作：|2374407|在variables.less文件中，可以修改边沟宽度：|2374408|//+GRID
//+--------------------------------------------------

//+Default+940px+grid
//+-------------------------

@gridGutterWidth:+20px;|2374409|entityMap^0|0|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|T|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

UPDATE: 

Don't see anything in the documentation either, but here is a fix:

If you want to remove the gutter on the left and right ends of your container, you will have to add a class for the .alpha and the .omega.

<pre><code>.alpha { margin-left: 0; }
.omega { margin-right: 0; }
</code></pre>

If you want to change all the gutters: 

In the variables.less file, you can change the Gutter width:

<pre><code>// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------

@gridGutterWidth: 20px;
</code></pre>

blocks|key|4487059|text|只需从此处下载该框架的自定义版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4487060|http://twitter.github.com/bootstrap/customize.html#variables|offset|length|4487061|并使gridGutter+=+0px|4487062|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1O|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

Just download a custom version of the framework from here 

<a href="http://twitter.github.com/bootstrap/customize.html#variables" rel="nofollow">http://twitter.github.com/bootstrap/customize.html#variables</a>

and make the gridGutter = 0px

blocks|key|5902554|text|有同样的问题，这解决了我的漂亮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5902555|.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;
}|code-block|syntax|javascript|5902556|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Had the same problem, this solved it for my pretty nice:

<pre><code>.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;
}
</code></pre>

blocks|key|1804620|text|我知道这是一个旧的topic...but，但我相信它仍然是人们的一个问题。我发现这个非常有用的CSS为我解决了这个问题。享受吧！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1804621|/*+remove+spacing+between+middle+columns+*/
.row.no-gutter+[class*='col-']:not(:first-child):not(:last-child)+{
++padding-right:0;
++padding-left:0;
}
/*+remove+right+padding+from+first+column+*/
.row.no-gutter+[class*='col-']:first-child+{
++padding-right:0;
}
/*+remove+left+padding+from+first+column+*/
.row.no-gutter+[class*='col-']:last-child+{
++padding-left:0;
}

/*+only+for+column+content+visible+*/
.col-lg-1>div+{background-color:#ddd;}|code-block|syntax|javascript|1804622|CSS+Source+-+http://bootply.com/109530|offset|length|1804623|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bootply.com/109530^0|0|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I know this is an old topic...but I'm sure it's still an issue for folks. I found this very useful CSS that solved it for me. Enjoy!

<pre><code>/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
 padding-right:0;
 padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
 padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
 padding-left:0;
}

/* only for column content visible */
.col-lg-1&gt;div {background-color:#ddd;}
</code></pre>

<a href="http://www.bootply.com/109530" rel="nofollow">CSS Source - http://bootply.com/109530</a>

blocks|key|4487005|text|您可以将内容放入container-fluid+div中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4487006|<div+class='container-fluid'>
...
</div>|code-block|syntax|javascript|4487007|然后修改(在bootstrap.css中)或覆盖容器流体类：|4487008|.container-fluid+{
++++padding-left:+0px;
++++margin-left:+-20px;
++}|4487009|boostrap-responsive.css具有相同的类，因此您可以为移动屏幕和桌面屏幕设置不同的边距。|4487010|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can place your content into container-fluid div:

<pre><code>&lt;div class='container-fluid'&gt;
...
&lt;/div&gt;
</code></pre>

And then modify (in bootstrap.css) or override the container-fluid class:

<pre><code>.container-fluid {
 padding-left: 0px;
 margin-left: -20px;
 }
</code></pre>

boostrap-responsive.css has the same class so you can set different margins for mobile screens vs. desktop screens.

blocks|key|1804566|text|最好在960.gs框架中添加一个类似alpha和omega的自定义样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1804567|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Its better to add a custom style similar to alpha and omega in 960.gs framework.

blocks|key|4487064|text|body+{
++margin-right:+-15px;
++overflow-x:+hidden;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4487065|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-css prettyprint-override"><code>body {
 margin-right: -15px;
 overflow-x: hidden;
}
</code></pre>

blocks|key|2374566|text|尝试将此代码添加到您的自定义css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2374567|.row-nogutter+{
++++margin-right:+0;
++++margin-left:+0;
+}|code-block|syntax|javascript|2374568|并使用像<div+class='row+row-nogutter'>这样的行|offset|length|style|CODE|2374569|如果这仍然不起作用，请尝试添加!important，但我不建议这样做。|2374570|entityMap^0|0|0|4|U|0|F|A|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

Try adding this to your custom css:

<pre><code>.row-nogutter {
 margin-right: 0;
 margin-left: 0;
 }
</code></pre>

And using your row like <code>&lt;div class='row row-nogutter'&gt;</code>

If this still doesn't work try adding <code>!important</code> but I don't recommend it.

Maybe I'm crazy but is there not a way to get rid of the 20px gutter on the twitter bootstrap? For example I've used frameworks that use an alpha and omega that over-ride the gutter to give it a margin:0px; I'm not currently seeing anything like this in the twitter bootstrap documentation.

Get rid of Gutter in TwitterBootstrap

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

也许我是疯了，但是有没有办法摆脱twitter bootstrap上的20px间隔呢？例如，我使用了使用alpha和omega的框架，它们覆盖了间隔:0px；我目前还没有在twitter引导程序文档中看到这样的内容。

问在TwitterBootstrap中消除间隔
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TwitterBootstrap中消除间隔EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TwitterBootstrap中消除间隔
EN