Twitter Bootstrap：在较小的屏幕宽度左右的白色空间？ [英] Twitter Bootstrap: white space on left and right side in smaller screen widths?

问题描述

我有类似这样的标记：

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

显然，我想要 .container-fluid 跨越屏幕的整个宽度。然而，在较小的屏幕宽度，它似乎不这样做。屏幕两侧出现一个空间，从而减少了屏幕空间，并影响了我想达到的整体外观和感觉。

Obviously, I want the .container-fluid to span the entire width of the screen. However, in smaller screen widths, it doesn't seem to do that. There appears a space on both sides of the screen, thus reducing the amount of screen real estate and affecting the overall look and feel I'm trying to achieve.

有一种方式摆脱这个空间？我想要 .container-fluid 跨越屏幕的整个宽度，而不管屏幕宽度。

Is there a way to get rid of this space? I want .container-fluid to span the entire width of the screen regardless of the screen width.

推荐答案

在bootstrap-responsive.css中，body以更小的窗口大小在左右两边填充20px。如果您根本不想要，请从您的版本中删除它。它在803行，看起来像这样：

In bootstrap-responsive.css, the body gets a 20px padding on the left and right at smaller windows sizes. If you don't want that at all, remove it from your version. It's at line 803 and looks like this:

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

如果你只想删除某个元素上的空格，类，将这些边距添加到它：

If you just want to remove the white space on a certain element or class, add these margins to it:

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

这篇关于Twitter Bootstrap：在较小的屏幕宽度左右的白色空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！