Twitter Bootstrap 3删除行和col-12上的右边距和填充

Question

我在我的Asp.Net MVC 5项目中使用Twitter Bootstrap 3.0 LESS源代码.我使用Top Navbar(如此处所示),然后在布局页面中使用更多行.

我使用以下行来获取100%的页面宽度:

<div class="row">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

但是这会在每行的右侧添加额外的填充.这也为页面添加了一个水平滚动条,当页面向右滚动时,整个页面上都有一个空白的垂直装订线.

在每行上删除margin-right并在所有col-md-12上右键填充更正布局.但是,我觉得这不是正确的做法.

任何想法如何在整个结果bootstrap.css中一次性删除那些不必要的边距和填充？

Answer 1

您的问题是由于未将您的.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>

在width:100%;您.container将行100%(红色).仍然是您内容的填充(黄色).这个填充是网格的排水沟,请参阅:https://stackoverflow.com/a/19044326/1596547

不,这没有用.col-md-12上的填充权仍然占优势.我寻找在.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;
}

Answer 2

原始的引导代码是

.row{
   margin-right:-15px;
   margin-left:-15px;
}

这就是为什么你有填充和滚动条.

所以你想重置它们,0px但如果它只是你想要的一次,你不应该覆盖原始的bootstrap 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正常的行为了.