Twitter Bootstrap: пустое пространство слева и справа при меньших ширинах экрана?

У меня есть разметка, похожая на это:

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

Очевидно, что я хочу, чтобы .container-fluid охватывала всю ширину экрана. Однако при меньших ширинах экрана, похоже, это не так. На обеих сторонах экрана появляется пространство, что уменьшает объем экранной недвижимости и влияет на общий внешний вид, который я пытаюсь достичь.

Есть ли способ избавиться от этого пространства? Я хочу, чтобы .container-fluid охватывала всю ширину экрана независимо от ширины экрана.

Ответы

Ответ 1

В bootstrap-responsive.css, тело получает 20px padding слева и справа при меньших размерах окна. Если вы этого не хотите, удалите его из своей версии. Он находится на линии 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;

Ответ 2

У меня была такая же проблема, используя Bootstrap 3.0. Выбрал его для небольших экранов, поставив:

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

в моей собственной таблице стилей.

Ответ 3

Просто

.container-fluid {
     padding:0;
}

Если строка прокрутки появляется из-за рамки рамки, должно быть

box-sizing: border-box;

в соответствующем классе, чтобы исчезнуть полоса прокрутки

Ответ 4

Два белых поля создаются классами content и body-content. Если вы используете эти классы в любом внешнем div, попробуйте удалить эти классы из них, чтобы удалить пустые поля по обе стороны страницы.

Ответ 5

Просто добавьте класс 'p-0' рядом с классом 'container-liquid', потому что в начальной загрузке: 0 уже есть.

For example

Это не курсив