我在我的 Asp.Net MVC 5 项目中使用 Twitter Bootstrap 3.0 LESS 源代码。我使用顶部导航栏 (as given here)，然后在布局页面中再添加几行。
我使用以下行来获取 100% 的页面宽度：
<div class="row">
<div class="col-md-12">
// More HTML code
</div>
</div>
但这会在每一行的右侧添加一个额外的填充。这也为页面添加了一个水平滚动条，当页面向右滚动时，整个页面的空白垂直装订线可见。
删除每一行的 margin-right 和所有 col-md-12 的 padding-right 可以更正布局。但是，我觉得这不是正确的做法。
知道如何在生成的 bootstrap.css 中一劳永逸地删除那些不必要的边距和填充吗？
【问题讨论】：
标签： html css twitter-bootstrap less twitter-bootstrap-3
您的问题是由于没有将您的 .rows 包装在 .container 类中。
试试这个：
<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>
.container 上的 width:100%; 将使行变为 100%（红色）。仍然是您内容周围的填充（黄色）。这个填充是网格的排水沟，见：https://stackoverflow.com/a/19044326/1596547
不，这没有帮助。 col-md-12 上的 padding-right 仍然占主导地位。 我为任何列寻求在 .less 源代码中实现的通用内容 输入 (col-*-12)！
所有col-*-* 的两边都有 15px 的内边距。 *-12 类之间没有区别，除了 *-12 类没有浮点数。
所有col-* 类的css / less 选择器：
[class^="col-"] {
padding-left: 0;
padding-right: 0;
}
所有col-*-12 类的css / less 选择器：
[class$="-12"]
{
padding-left: 0;
padding-right: 0;
}
【讨论】：
container 课程，感谢您的帮助！无论如何它没有任何意义 - 为什么只有右侧受到额外填充的影响，而不是左侧？ container 对两种情况都使用相同的填充..
原来的引导代码是
.row{
margin-right:-15px;
margin-left:-15px;
}
这就是你有填充和滚动条的原因。
所以你想在0px 重置它们，但如果你只想要一次，你不应该覆盖原来的引导 CSS。然后您可以稍后以正常行为使用它。
我要做的是添加另一个这样的类：
<div class="row rowWithFullWidth">
<div class="col-md-12">
// More HTML code
</div>
</div>
然后用这个 CSS
.rowWithFullWidth {
margin-left: 0 !important;
margin-right: 0 !important;
}
这样，您可以使用.row 之后的正常行为。
【讨论】：
rowFullWidth。
解决此问题的最简单方法是注释掉所有列的左右填充，将容器类的左右填充设置为 0，并从行中删除负边距。
只需在第 691 行注释掉 .row 类，并在第 714 行注释掉 class^="col-" 上左右填充的代码。
这对我有用：
.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;*/
}
【讨论】：
您必须进入引导程序源代码，找到 .row 选择器，并更改与之关联的 css。
这可能不是您想要做的。
相反，我建议您创建自己的选择器以用于您想要的这种类型的行。但是，如果您要这样做，则不能将其称为.row，因为它会与引导程序使用的.row 选择器冲突。您必须将其命名为 .custom-row
【讨论】：
如上所述，首先要做的是匹配 container 和 row 类：
<div class="container tight">
<div class="row">
<div class="col-md-12">
<!-- html content -->
</div>
</div>
</div>
要删除该填充，您可以像这样使用一些 css：
div.container.tight {
padding: 0;
}
div.container.tight > .row-fluid {
padding: 0;
}
我在容器中添加了一个 tight 类，以将这种填充删除限制在这个位置（或任何其他带有 tight 的容器）。在全球范围内执行此操作可能会干扰导航栏等其他功能。
【讨论】：
您可以通过以下方式在 Bootstrap 3 中解决此问题：
例子：
首先将你的行包装在一个容器中：
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
然后在你的容器类中添加一个 0px 的填充：
.container {
padding: 0px;
}
通过隐藏水平溢出来结束：
body {
overflow-x: hidden;
}
哒哒！
【讨论】：