Bootstrap 3 - Dlaczego klasa wiersza jest szersza niż jej kontener?

116

Właśnie zacząłem używać Bootstrap 3. Trudno mi zrozumieć, jak działa klasa row. Czy jest sposób, aby uniknąć padding-lefti padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3 Petran
źródło
@Adrift czy to nadal prawda? Nie jestem pewien, czy masz na myśli, że nie działają poprawnie, ponieważ używam ich i wydają się działać tak, jak powinny.
Płatki zbożowe
1
@Cereal: Już nie. Zostało to dodane w wersji 3.0.2
dryfowanie
3
ponieważ wiersz bootstrap ma lewy i prawy margines -15px.
Prawdopodobnie nie twój problem, ale dla każdego, kto ma ten sam typ problemu: upewnij się, że masz tylko jeden atrybut klasy w swoich elementach div. Przypadkowo je podwoiłem i mam ten sam problem.
The One True Colter

Odpowiedzi:

151

We wszystkich systemach kratowych między każdą kolumną znajdują się rynny. System Bootstrap ustawia wypełnienie 15 pikseli po lewej i prawej stronie każdej kolumny, aby utworzyć tę rynnę.

Problem w tym, że pierwsza kolumna nie powinna mieć połowy rynny po lewej stronie, a ostatnia nie powinna mieć połowy rynny po prawej. Zamiast używać jakiegoś rodzaju .firstlub .lastklasy na tych kolumnach, jak robią to niektóre systemy siatki, zamiast tego ustawiają .rowklasę tak, aby miała ujemne marginesy, które pasują do wypełnienia kolumn. To „wyciąga” rynny z pierwszej i ostatniej kolumny, jednocześnie ją poszerzając.

Element .rowdiv nigdy nie powinien być używany do przechowywania niczego innego niż kolumny siatki. Jeśli tak, zobaczysz, że zawartość jest przesunięta w stosunku do dowolnych kolumn, jak widać na twoich skrzypcach.

AKTUALIZACJA:

Po udzieleniu odpowiedzi zmodyfikowałeś swoje pytanie, więc oto odpowiedź na pytanie, które teraz zadajesz: Dodaj .containerklasę do pierwszej <div>. Zobacz przykład roboczy .

Sean Ryan
źródło
2
Kolumny grid są oddzielone przez napawanie, nie granicznej (w BS3)
dryfujący
3
Wspaniały! To wyjaśnia całą przepełnioną zawartość.
Rutwick Gangurde
27

W bootstrap 3.3.7 ten problem został rozwiązany poprzez owijanie .row z .container-fluid.

dbarma
źródło
to działało dla mnie, chociaż początkowo myślałem, że tak nie jest, to dlatego, że miałem otwartą konsolę internetową programisty, co zmniejsza szerokość, ale najwyraźniej też to psuje. .container-fluidSugerowano również użycie tutaj: stackoverflow.com/a/23616447/5272567
Matthias
działa również wtedy, gdy opakowujący element div ma pozycję absolute. dzięki za podpowiedź
InsOp
gdybym mógł wielokrotnie zagłosować za tą odpowiedzią ... :)
rony36
Ta sama poprawka dla Bootstrap 4.
Rob L
19

Zobacz moją odpowiedź poniżej na podobny post.

Dlaczego plik bootstrap .row ma domyślny lewy margines -30px?

Zasadniczo używasz „clearfix” zamiast „row”. Robi dokładnie to samo, co „wiersz” z wyłączeniem ujemnego marginesu.

Kyle
źródło
2
Te klasy robią dwie różne rzeczy, choć może się wydawać, że robią to wizualnie. Clear nie jest tak elastyczna w sytuacjach reagowania, a w przypadku systemów grid zachowanie .row jest poprawne.
Todd Baur,
Rozwiązuje to przepełnienie treści poza opakowaniem.
Bhojendra Rauniyar
Ale lepszym sposobem jest owinięcie wiersza pojemnikiem.
Bhojendra Rauniyar
NAJLEPSZA ODPOWIEDŹ! W GÓRĘ!
Anderson Bressane
18

Użyłem klasy row wewnątrz klasy kontenera i nadal miałem problem. Kiedy dodałem margin-left: auto; margin-right: auto;do .rowklasy, działało dobrze.

Jeffrey
źródło
8
To zadziałało jak urok! Dodanie klasy „mx-auto” w bootstrap 4 rozwiązało problem przepełnienia.
Michelle M.,
3

@Michelle M. powinna otrzymać pełne uznanie za tę odpowiedź.
Powiedziała w jednym z komentarzy:

Dodanie klasy „mx-auto” w bootstrap 4 rozwiązało problem przepełnienia.

Musisz zaktualizować swój pierwszy divelement w następujący sposób:

<div class="row mx-auto" style="background:#000000">

Nie musisz tego robić dla wszystkich wierszy zagnieżdżonych (jeśli je masz).
Po prostu dodaj mx-autodo najbardziej zewnętrznego row(lub wierszy), aby uniknąć pionowego paska przewijania.
Nie zastępuj zachowania wszystkich wierszy Bootstrap, dodając klasę „row” w celu zastąpienia marginesów.

MikeTeeVee
źródło
1

Dla przyszłych programistów debugujących ten problem:

Bootstrap ustawia dopełnienie dla kolumn wierszy, więc żadna zawartość wiersza nie powinna pojawiać się poza kontenerem. Jeśli tego doświadczasz i używasz poprawnie systemu siatki bootstrap, używając klas col -..., prawdopodobnie masz gdzieś dodatkowy CSS resetujący wypełnienie kolumn.

JSideris
źródło
Lub masz starą wersję Bootstrap. Na przykład 3.0.0 rozprowadzany z VS2015. Zobacz github.com/twbs/bootstrap/issues/8959
Adventure