Twitter Bootstrap 3删除行上的右页边距和填充以及col12
我在我的Asp.Net MVC5项目中使用Twitter Bootstrap 3.0更少的源码。我使用顶部导航栏(as given here)，然后在布局页面中增加几行。
我使用下面的代码行来获取100%的页面宽度：
<div class="row">
<div class="col-md-12">
// More HTML code
</div>
</div>但这会在每一行的右侧添加额外的填充。这还会向页面添加一个水平滚动条，当向右侧滚动页面时，整个页面上的空白垂直间隔可见。
删除每行的右页边距和所有col md-12的右填充可以更正布局。然而，我不认为这是正确的方法。
你知道如何在生成的bootstrap.css中一劳永逸地删除那些不必要的空白和填充吗？
回答 3
Stack Overflow用户
发布于 2014-02-13 10:18:38
原始引导程序代码是
.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。
Stack Overflow用户
发布于 2014-01-10 06:39:29
解决这个问题最简单的方法是注释掉所有列的左填充和右填充，将container类的左填充和右填充设置为0，并从行中删除负边距。
只需在第691行注释掉.row类，在第714行注释掉class^=“col1-”上的左右填充代码。
这对我来说很有效：
.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;*/
}Stack Overflow用户
发布于 2013-11-02 22:18:12
您必须进入bootstraps源代码，找到.row选择器，并更改与关联的css。
这可能不是你想要做的。
相反，我建议创建您自己的选择器来用于您想要的这种类型的行。如果你要这样做，你就不能把它叫做.row，因为它会与bootstrap使用的.row选择器冲突。你得把它叫做.custom-row
https://stackoverflow.com/questions/19742804
复制相似问题