Html Twitter Bootstrap 3 删除一行和第 12 列上的右侧边距和填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19742804/
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
Twitter Bootstrap 3 Removing RIGHT margin and padding on a row and col-12
提问by Santosh
I'm using Twitter Bootstrap 3.0 LESS source in my Asp.Net MVC 5 project. I use a Top Navbar (as given here) and then few more rows in the the layout page.
我在我的 Asp.Net MVC 5 项目中使用 Twitter Bootstrap 3.0 LESS 源。我使用顶部导航栏（如此处给出），然后在布局页面中再使用几行。
I use following for rows to take 100% page width:
我使用以下行来占据 100% 的页面宽度：
<div class="row">
<div class="col-md-12">
// More HTML code
</div>
</div>
But this adds an extra padding on the right of each row. This also adds a horizontal scrollbar to the page and a blank vertical gutter throughout the page is visible when scrolled the page to its right.
但这会在每行的右侧添加一个额外的填充。这还会向页面添加一个水平滚动条，并且当将页面向右滚动时，可以看到整个页面的空白垂直装订线。
Removing margin-right on each row and padding-right on all col-md-12 corrects the layout. However, I don't feel this is the correct way to do it.
删除每行的 margin-right 和所有 col-md-12 的 padding-right 可以更正布局。但是，我不认为这是正确的方法。
Any idea how to remove those unnecessary margin and padding on right once for all, throughout the resultant bootstrap.css?
知道如何在整个生成的 bootstrap.css 中一次性删除那些不必要的边距和填充吗？
回答by Bass Jobsen
Your problem is caused by NOT wrapping your .rows in a .containerclass.
您的问题是由于未将.rows包装在.container类中引起的。
Try this:
尝试这个：
<div class="container" style="width:100%;background-color:blue;">
<div class="row" style="background-color:green;">
<div class="col-md-12" style="background-color:red;">
<div style="background-color:yellow;">test test test</div>
</div>
</div>
</div>
The width:100%;on your .containerwill make the rows 100% (red). The will still be a padding around your content (yellow). This padding is the gutter of the grid, see: https://stackoverflow.com/a/19044326/1596547
在width:100%;您.container将行100％（红色）。仍然是您的内容周围的填充（黄色）。这个填充是网格的排水沟，见：https: //stackoverflow.com/a/19044326/1596547
No, this does not help. The padding-right on col-md-12 still prevails. I seek something generic implemented in .less source for any column type (col-*-12)!
不，这没有帮助。col-md-12 上的 padding-right 仍然占优势。我寻求在 .less 源中为任何列类型 (col-*-12) 实现的通用内容！
All col-*-*have a padding of 15px on both sides. There is no difference between the *-12classes except from the *-12classes don't have a float left.
所有的col-*-*两边都有 15px 的内边距。*-12除了*-12类没有浮点数之外，类之间没有区别。
css / less selector for all your col-*classes:
所有col-*类的css/less 选择器：
[class^="col-"] {
padding-left: 0;
padding-right: 0;
}
css / less selector for all your col-*-12classes:
所有col-*-12类的css/less 选择器：
[class$="-12"]
{
padding-left: 0;
padding-right: 0;
}
回答by Marc
The original bootstrap code is
原始引导代码是
.row{
margin-right:-15px;
margin-left:-15px;
}
that's why you have padding and a scroll bar.
这就是为什么你有填充和滚动条。
So you want to reset them at 0pxbut if it's something you only want once, you should not override the original bootstrap CSS. Then you can later use it with the normal behavior.
所以你想重置它们，0px但如果你只想要一次，你不应该覆盖原始的引导 CSS。然后您可以稍后将其与正常行为一起使用。
What I would do is to add another class like this:
我要做的是添加另一个这样的类：
<div class="row rowWithFullWidth">
<div class="col-md-12">
// More HTML code
</div>
</div>
Then with this CSS
然后用这个 CSS
.rowWithFullWidth {
margin-left: 0 !important;
margin-right: 0 !important;
}
that way, you can use .rowwith the normal behavior after.
这样，您就可以使用.row之后的正常行为。
回答by Denis
The easiest way to solve this problem is to comment out left and right padding from all columns, set left and right padding on container class to 0 and to remove a negative margin from rows.
解决此问题的最简单方法是注释掉所有列的左右填充，将容器类的左右填充设置为 0，并从行中删除负边距。
Just comment out .row class at line 691 and at line 714 comment out code for left and right padding on class^="col-".
只需在第 691 行注释掉 .row 类，在第 714 行注释掉 class^="col-" 上左右填充的代码。
That's works for me:
这对我有用：
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
.row {
/*margin-right: -15px;
margin-left: -15px;*/
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
position: relative;
min-height: 1px;
/*padding-right: 15px;
padding-left: 15px;*/
}
回答by Peter Berg
You would have to go into bootstraps source code, find the .rowselector, and change the css associated with.
您必须进入引导程序源代码，找到.row选择器，并更改与之关联的 css。
This is probably not what you want to do.
这可能不是您想要做的。
Instead, I would recommend creating your own selector to use for this type of row you want. If you were to do this though, you couldn't call it .rowbecause it would conflict with .rowselector used by bootstrap. You'd have to call it something like .custom-row
相反，我建议创建您自己的选择器以用于您想要的这种类型的行。但是，如果您要这样做，则无法调用它，.row因为它会与.row引导程序使用的选择器发生冲突。你必须这样称呼它.custom-row
回答by user1118279
As mentioned above the first thing to do is have matching containerand rowclasses:
如上所述，首先要做的是匹配容器和行类：
<div class="container tight">
<div class="row">
<div class="col-md-12">
<!-- html content -->
</div>
</div>
</div>
To remove that padding, you could then use some css like so:
要删除该填充，您可以像这样使用一些 css：
div.container.tight {
padding: 0;
}
div.container.tight > .row-fluid {
padding: 0;
}
I added a class tightto the container to restrict this padding removal to just this one spot (or any other container with tighton it). Doing it globally could interfere with other things like navbars potentially.
我在容器中添加了一个紧类，以将这种填充移除限制在这个位置（或任何其他紧的容器）。在全球范围内执行此操作可能会干扰其他内容，例如导航栏。
回答by ariebear
You can resolve this issue in Bootstrap 3 by:
您可以通过以下方式在 Bootstrap 3 中解决此问题：
- Wrapping your row in a div with a class of container or container-fluid and adding a padding of 0px.
- Hiding the horizontal overflow.
- 用一类容器或容器流体将您的行包装在一个 div 中，并添加一个 0px 的填充。
- 隐藏水平溢出。
Example:
例子：
First wrap your row in a container:
首先将您的行包装在容器中：
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
Then add a padding of 0px to your container class:
然后向您的容器类添加 0px 的填充：
.container {
padding: 0px;
}
Finish off by hiding the horizontal overflow:
通过隐藏水平溢出完成：
body {
overflow-x: hidden;
}
Ta da!
哒哒！
