css - Twitter Bootstrap：较小屏幕宽度的左侧和右侧空白？

Question

我有类似这样的标记：

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

显然，我希望.container-fluid跨越屏幕的整个宽度。但是，在较小的屏幕宽度中，它似乎并没有这样做。屏幕两侧出现了一个空间，从而减少了屏幕空间的数量并影响了我试图实现的整体观感。

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

score 18 · Accepted Answer

在 bootstrap-responsive.css 中，在较小的窗口尺寸下，主体在左侧和右侧获得 20 像素的填充。如果您根本不想这样做，请将其从您的版本中删除。它位于第 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;

score 9 · Accepted Answer

我在使用Bootstrap 3.0时遇到了同样的问题。通过放置以下内容解决了小屏幕：

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

在我自己的样式表中。

score 3 · Accepted Answer

简单地

.container-fluid {
     padding:0;
}

如果滚动条出现是由于边框框，必须有

box-sizing: border-box;

在相关类中使滚动条消失

score 2 · Accepted Answer

只需在“container-fluid”类旁边添加类“p-0”，因为在引导程序中填充：0 已经定义。

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

score 0 · Accepted Answer

空白是由引导类中的填充引起的。
您可以通过添加 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;
}

score 0 · Accepted Answer

有同样的问题尝试了上述解决方案，但没有一个对我有用。

这对我有用。

  html{
    width: fit-content;
  }

score 0 · Accepted Answer

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

css - Twitter Bootstrap：较小屏幕宽度的左侧和右侧空白？

7 回答 7

Related

Reference