Question

我有类似的标记：

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <h1>Hello World!</h1>
        </div>
    </div>
</div>

显然，我希望.container-fluid跨越整个屏幕宽度。但是，在较小的屏幕宽度中，它似乎没有这样做。屏幕两侧都有一个空间，从而减少了屏幕占用空间，影响了我想要实现的整体外观和感觉。

有没有办法摆脱这个空间？无论屏幕宽度如何，我都希望.container-fluid跨越整个屏幕宽度。

Answer 1

在bootstrap-responsive.css中，正文在左侧和右侧以较小的窗口大小获得20px填充。如果您根本不想要它，请从您的版本中删除它。它位于第803行，看起来像这样：

@media (max-width: 767px) {
  /*body { These are the lines you want to remove
    padding-right: 20px; 
    padding-left: 20px;
  }*/

如果您只想删除某个元素或类的空白区域，请将这些边距添加到其中：

 margin-left:-20px;
 margin-right:-20px;

Answer 2

我使用 Bootstrap 3.0 时遇到了同样的问题。通过以下方式解决了小屏幕：

.container {
     padding-right: 0; /*15px in bootstrap.css*/
     padding-left: 0;  /*idem*/
     margin-right: auto;
     margin-left: auto;
}

在我自己的样式表中。

Answer 3

简单地

.container-fluid {
     padding:0;
}

如果由于边框框而出现滚动条，则必须

box-sizing: border-box;

相关课程中的

使滚动条消失

Answer 4

只需在'container-fluid'类旁边添加'p-0'类，因为在bootstrap中已经定义了padding：0。

<div class="container-fluid p-0">Content goes here</div>

Answer 5

两个白色边距由类content和body-content创建。如果您在任何外部div中使用这些类，请尝试从中删除这些类以删除页面任一侧的空白边距。

Answer 6

空白是由bootstrap类中的填充引起的。
您可以通过添加ID覆盖引导类

<div id="remove-padding" class="container-fluid">
    <div class="container">
        <div class="row">
            <h1>Hello World!</h1>
        </div>
    </div>
</div>

在.css

中

#remove-padding {
  padding-right: 0;
  padding-left: 0;
}

Twitter Bootstrap：左侧和右侧的空白区域，屏幕宽度较小？

6 个答案: