19

我在我的 Asp.Net MVC 5 项目中使用 Twitter Bootstrap 3.0 LESS 源。我使用顶部导航栏（如此处给出），然后在布局页面中再使用几行。

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

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

但这会在每行的右侧添加一个额外的填充。这也为页面添加了一个水平滚动条，当页面向右滚动时，整个页面的空白垂直装订线可见。

删除每一行上的 margin-right 和所有 col-md-12 上的 padding-right 可以更正布局。但是，我认为这不是正确的方法。

知道如何在整个结果 bootstrap.css 中一劳永逸地删除那些不必要的边距和填充吗？

4

6 回答 6

27

您的问题是由于没有将您.row的 s 包装在一个.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 上的 padding-right 仍然占主导地位。我寻求在 .less 源代码中为任何列类型（col-*-12）实现的通用方法！

col-*-*两边都有 15px 的填充。类之间没有区别，*-12除了*-12类没有浮点数。

所有类的 css / less 选择器col-*：

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

所有类的 css / less 选择器col-*-12：

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}
于 2013-11-19T20:04:07.287 回答
7

原始引导代码是

.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在之后使用正常行为。

于 2014-02-13T02:18:38.040 回答
1

解决此问题的最简单方法是注释掉所有列的左右填充，将容器类的左右填充设置为 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;*/
}
于 2014-01-09T22:39:29.337 回答
0

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

这可能不是您想要做的。

相反，我建议您创建自己的选择器以用于您想要的这种类型的行。但是，如果您要这样做，则不能调用它，.row因为它会与.row引导程序使用的选择器冲突。您必须将其称为.custom-row

于 2013-11-02T14:18:11.970 回答
0

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

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

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

于 2014-08-20T00:33:37.170 回答
0

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

  1. 用一个容器或容器流体类将你的行包裹在一个 div 中，并添加一个 0px 的填充。
  2. 隐藏水平溢出。

例子：

首先将您的行包装在一个容器中：

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

然后将 0px 的填充添加到您的容器类中：

.container {
    padding: 0px;
}

最后隐藏水平溢出：

body {
    overflow-x: hidden;
}

达达！

于 2015-07-28T18:35:20.920 回答