Question

我的bootstrap有问题。它总是在我的网站上左右添加填充。我使用“容器流体”看到这个例子：

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

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

Answer 2

您可以定义自己的类，例如.remove-padding并覆盖bootstrap 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中的代码片段在我的CSS之后导入外部CSS。如果在引导样式之前导入样式，则不需要!important覆盖Bootstrap CSS。

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

默认的bootstrap 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;
}

为什么在这里添加bootstrap padding并且没有删除它？我担心......

Bootstrap 3不需要的填充物despite容器 - 流体类

3 个答案: