Question

我在我的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上右键填充更正布局。但是，我觉得这不是正确的做法。

知道如何在整个bootstrap.css中删除那些不必要的边距和填充权吗？

Answer 1

您的问题是由于未将.row包裹在.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之后的正常行为。

Answer 3

解决此问题的最简单方法是从所有列中注释掉左右填充，将容器类的左右填充设置为0并从行中删除负边距。

只需在第691行和第714行注释掉.row类，注释掉类^ =“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;*/
}

Answer 4

您必须进入bootstraps源代码，找到.row选择器，并更改与之关联的css。

这可能不是你想要做的。

相反，我建议您创建自己的选择器以用于您想要的此类行。如果您这样做，则无法将其称为.row，因为它会与bootstrap使用的.row选择器冲突。您必须将其称为.custom-row

Answer 5

如上所述，首先要做的是匹配容器和行类：

<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;
}

我在容器中添加了一个紧类，以将此填充删除限制在这一个位置（或其上任何其他紧的容器）。在全球范围内进行此操作可能会干扰其他内容，例如导航栏。

Answer 6

您可以通过以下方式在Bootstrap 3中解决此问题：

使用一类容器或容器流体将行包装在div中，并添加0px的填充。
隐藏水平溢出。

示例：

首先将行包装在容器中：

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
 </div>

然后在容器类中添加0px的填充：

.container {
    padding: 0px;
}

通过隐藏水平溢出来完成：

body {
    overflow-x: hidden;
}

Ta da！

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

6 个答案: