Bootstrap 3 不需要的填充尽管容器流体类答案

【问题标题】：Bootstrap 3 unwanted padding despites container-fluid classBootstrap 3 不需要的填充尽管容器流体类
【发布时间】：2017-05-06 23:34:49
【问题描述】：

我的引导程序有问题。它总是在我的网站左右添加一个填充。我使用“container-fluid”看这个例子：

...</head>
<body>
<div class="container-fluid">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>

或类似的东西

...</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>
</div>

或者像这样

...</head>
<body>
<div class="container-fluid">
<div class="row col-xs-12 col-md-12">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>
</div>

或

...</head>
<body>
<div class="container-fluid">
<div class="row col-xs-12 col-md-12">
<div class="row">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>
</div>
</div>

padding appaer 总是，没有机会。

我的错是什么？我不想像这里那样用其他 CSS 覆盖：

Remove padding from columns in Bootstrap 3

【问题讨论】：

不，这不能解决问题。
如果移除容器不能解决问题，那么您在某处有另一个容器导致此问题。
类顶部的CSS：.top { background:#000 url(bg_oben.jpg) no-repeat left top; height: 60vh; background-size: cover; }

标签： html css twitter-bootstrap

【解决方案1】：

你需要遵循一个结构：

<body>
 <div class="container-fluid">
    <div class="row">
      <div class=" col-xs-12 col-md-12">
        <div class="anyclass">
          PAGE CONTENT WITH MORE DIVS
        </div>
      </div>
    </div>
  </div>
</body>

同时定义body和html样式

html, body {
  width: 100%;
  margin: 0;
}

为避免空白，您可以使用默认为负边距的 BS 类 row：

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

【讨论】：

对不起，我已经尝试过这个解决方案（没有定义正文和 html 样式），这对我不起作用。
Enter post the comment...): 现在我再次尝试定义 body 和 html 样式，它不起作用...

【解决方案2】：

您可以定义自己的类，例如 .remove-padding 并覆盖引导 CSS。

.remove-padding{
  padding: 0px !important;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid remove-padding">
  <div class="top">
    PAGE CONTENT WITH MORE DIVS
  </div>
</div>

请小心使用!important，因为stackoverflow中的代码sn-p在我的CSS之后导入外部CSS。如果您的样式是在引导样式之前导入的，则不需要!important 来覆盖引导 CSS。

【讨论】：

正如我上面写的，我喜欢一个不添加新类的解决方案。必须用bottstrap自己做，还是不用？
它唯一一个重置填充的新类，我认为这是一个简单明了的解决方案
这对我没有帮助。一旦我更改代码，黑色条纹左右消失（填充）但出现水平滚动条......

【解决方案3】：

我自己解决了这个问题。填充来自<div class="row col-xs-12 col-md-12">。

这里是完整的 HTML 代码：

 <div class="container-fluid">
    <div class="row">
       <div class="col-md-12 col-xs-12 remove-padding">
          <header>
            CONTENT
          </header>
       </div><!-- .col-md-12 -->
    </div><!-- .row -->
    BODY...
 </div><!-- .container-fluid -->

我正在添加 remove-padding 类来禁用填充。我的CSS：

.remove-padding{
padding: 0px !important;
}

以及默认的引导 CSS：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

为什么在此处添加引导程序填充而没有删除它？我很担心...

【讨论】：