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

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

在我自己的样式表中.