Html Twitter引导程序3删除行和列上的右边距和填充

在我的Asp.NETMVC5项目中，我使用的是TwitterBootstrap3.0更少的源代码。我使用一个顶部导航栏（），然后在布局页面中再使用几行

我对行使用以下选项以获得100%的页面宽度：

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

//更多HTML代码

但这会在每行的右侧添加额外的填充。这也会在页面上添加一个水平滚动条，当页面向右滚动时，页面上会出现一个空白的垂直边沟

删除每行的右侧边距和所有col-md-12的右侧填充可以更正布局。然而，我觉得这不是正确的方法

---

你知道如何在生成的bootstrap.css中一次性删除右边不必要的边距和填充吗？

你必须进入bootstrap源代码，找到

.row

选择器，并更改与之关联的css

这可能不是你想做的

---

相反，我建议您创建自己的选择器，用于您想要的这种类型的行。但是，如果要执行此操作，则不能将其称为

.row

，因为它将与引导使用的

.row

选择器冲突。您必须将其称为

.custom row

您的问题是由于没有将

.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>

所有

列-*-12

类的css/less选择器：

[class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}

<div class="container tight">
    <div class="row">
        <div class="col-md-12">
            <!-- html content -->
        </div>
    </div>
</div>

---

解决此问题的最简单方法是注释掉所有列中的左、右填充，将容器类中的左、右填充设置为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;*/
}

---

原始引导代码是

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

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

因此，您希望将它们重置为

0px

，但如果您只需要一次，则不应覆盖原始引导CSS。然后，您可以稍后将其与正常行为一起使用

我要做的是添加另一个类，如下所示：

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

---

这样，您就可以使用

.row

和之后的正常行为。

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

[class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}

<div class="container tight">
    <div class="row">
        <div class="col-md-12">
            <!-- html content -->
        </div>
    </div>
</div>

---

我在容器中添加了一个类tight，将填充物的移除限制在这一点上（或任何其他容器上有tight）。在全局范围内执行此操作可能会干扰导航栏等其他功能。

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

用一类容器或容器流体将行包装在div中，并添加0px的填充

隐藏水平溢出

例如：

首先将行包装在容器中：

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

通过隐藏水平溢出来结束：

body {
    overflow-x: hidden;
}

---

塔达

不，这没用。col-md-12右侧的填充仍然占优势。我寻求在.less中实现任何列类型（col-*-12）的通用源代码！我错过了

容器

课程，谢谢你的帮助！无论如何，这没有任何意义-为什么只有右侧受到额外填充的影响，而不是左侧<代码>容器对这两种情况使用相同的填充。这不应该是可接受的答案，因为它在html中不应该是

rowFullWidth

。