Twitter Bootstrap: biała przestrzeń po lewej i prawej stronie w mniejszych szerokościach ekranu?

Question

Mam znaczników podobnym do tego:

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

Oczywiście, chcę .container-fluid aby objąć całą szerokość ekranu. Jednak w mniejszych szerokościach ekranu nie wydaje się, aby to zrobić. Po obu stronach ekranu pojawia się przestrzeń, zmniejszając w ten sposób ilość powierzchni ekranu i wpływając na ogólny wygląd, który próbuję osiągnąć.

Czy istnieje sposób na pozbycie się tej przestrzeni? Chcę, aby .container-fluid obejmował całą szerokość ekranu, niezależnie od szerokości ekranu.

Answer 1

W pliku bootstrap-responsive.css ciało ma dopełnienie 20 pikseli po lewej i prawej stronie w mniejszych rozmiarach okien. Jeśli w ogóle tego nie chcesz, usuń go ze swojej wersji. To na linii 803 i wygląda następująco:

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

Jeśli chcesz tylko usunąć spacje na pewnym elemencie lub klasy, dodać te marginesy do niego:

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

Answer 2

miałem ten sam problem przy użyciu Bootstrap 3.0. Rozwiązałem go na małe ekrany, umieszczając:

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

w moim własnym arkuszu stylów.

Answer 3

Wystarczy

.container-fluid { 
    padding:0; 
} 

Jeśli pasek przewijania pojawia się jej ze względu na polu granicznym, musi istnieć

box-sizing: border-box; 

w danej klasie, aby pasek przewijania zniknie

Answer 4

Dwa białe marginesy są tworzone według klas content i body-content. Jeśli używasz tych klas w dowolnym elemencie div, spróbuj usunąć te klasy z nich, aby usunąć puste marginesy po obu stronach strony.