Bootstrap 3 - Mengapa kelas baris lebih lebar dari containernya?

116

Saya baru saja mulai menggunakan Bootstrap 3. Saya mengalami kesulitan memahami cara kerja kelas baris. Adakah cara untuk menghindari padding-leftdan 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
sumber
@Adrift apakah ini masih benar? Saya tidak yakin apakah yang Anda maksud mereka tidak berfungsi dengan benar, karena saya telah menggunakannya dan tampaknya berfungsi sebagaimana mestinya.
Sereal
1
@ Sereal: Tidak lagi. Ini ditambahkan di v3.0.2
terpaut
3
karena baris bootstrap memiliki margin kiri dan kanan -15px.
Mungkin bukan masalah Anda, tetapi untuk orang lain yang memiliki jenis masalah yang sama: Pastikan Anda hanya memiliki satu atribut kelas pada div Anda. Saya tidak sengaja menggandakannya dan mendapatkan masalah yang sama.
The One True Colter

Jawaban:

151

Di semua sistem kisi, ada selokan di antara setiap kolom. Sistem Bootstrap menetapkan bantalan 15px di kiri dan kanan setiap kolom untuk membuat talang ini.

Masalahnya adalah kolom pertama tidak boleh memiliki separuh selokan di sebelah kiri, dan kolom terakhir tidak boleh memiliki separuh selokan di sebelah kanan. Daripada menggunakan semacam .firstatau .lastkelas pada kolom tersebut seperti yang dilakukan beberapa sistem kisi, mereka malah mengatur .rowkelas untuk memiliki margin negatif yang cocok dengan bantalan kolom. Ini "menarik" talang dari kolom pertama dan terakhir, sementara pada saat yang sama membuatnya lebih lebar.

The .rowdiv harus pernah benar-benar digunakan untuk memegang apa pun selain kolom kotak. Jika ya, Anda akan melihat konten bergeser relatif ke kolom mana pun, seperti yang terlihat pada biola Anda.

MEMPERBARUI:

Anda mengubah pertanyaan Anda setelah saya menjawab, jadi inilah jawaban dari pertanyaan yang sekarang Anda ajukan: Tambahkan .containerkelas ke kelas pertama <div>. Lihat contoh kerja .

Sean Ryan
sumber
2
Kolom grid dipisahkan oleh padding, bukan margin (dalam BS3)
terpaut
3
Bagus! Itu menjelaskan semua konten yang melimpah.
Rutwick Gangurde
27

Dengan bootstrap 3.3.7 masalah ini diselesaikan dengan membungkus .row dengan .container-fluid.

dbarma
sumber
ini berhasil untuk saya, meskipun awalnya saya pikir tidak, itu karena saya membuka konsol web pengembang yang mengurangi lebar, tetapi tampaknya juga mengacaukannya. Penggunaan .container-fluidjuga disarankan di sini: stackoverflow.com/a/23616447/5272567
Matthias
bekerja, juga, saat div pembungkus berada pada posisinya absolute. terima kasih atas petunjuknya
InsOp
jika saya dapat memberi suara untuk jawaban ini beberapa kali ... :)
rony36
Perbaikan yang sama untuk Bootstrap 4.
Rob L
19

Lihat balasan saya di bawah untuk posting serupa.

Mengapa bootstrap .row memiliki margin kiri default -30px?

Anda pada dasarnya menggunakan "clearfix" bukan "row". Ini sama persis dengan "baris" tidak termasuk margin negatif.

Kyle
sumber
2
Kelas-kelas itu melakukan dua hal yang berbeda, meskipun mereka mungkin tampak melakukannya secara visual. Clear tidak sefleksibel dalam situasi responsif dan dengan sistem grid perilaku .row sudah benar.
Todd Baur
Ini memecahkan konten yang meluap di luar pembungkus.
Bhojendra Rauniyar
Tetapi cara yang lebih baik adalah membungkus baris dengan wadah.
Bhojendra Rauniyar
ASWER TERBAIK! NAIK!
Anderson Bressane
18

Saya menggunakan kelas baris di dalam kelas kontainer dan masih memiliki beberapa masalah. Ketika saya menambahkan margin-left: auto; margin-right: auto;ke .rowkelas itu bekerja dengan baik.

Jeffrey
sumber
8
Ini bekerja dengan sangat baik! Menambahkan kelas 'mx-auto' di bootstrap 4 memperbaiki masalah overflow untuk saya.
Michelle M.
3

@Michelle M. harus menerima kredit penuh untuk Jawaban ini.
Dia berkata di salah satu Komentar:

Menambahkan kelas 'mx-auto' di bootstrap 4 memperbaiki masalah overflow untuk saya.

Anda perlu memperbarui divElemen pertama Anda seperti ini:

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

Tidak perlu melakukan ini untuk semua Baris Bersarang (jika Anda memilikinya).
Cukup tambahkan mx-autoke paling luar row(atau Baris) untuk menghindari Vertical-Scrollbar.
Jangan Timpa perilaku semua Baris Bootstrap dengan menambahkan kelas "baris" untuk menggantikan Margin.

MikeTeeVee
sumber
1

Untuk setiap pengembang di masa mendatang yang melakukan debugging masalah ini:

Bootstrap mengatur padding untuk kolom baris, jadi tidak ada konten baris yang akan muncul di luar wadah. Jika Anda mengalami ini dan Anda menggunakan sistem grid bootstrap dengan benar menggunakan kelas col -..., kemungkinan Anda memiliki CSS tambahan di suatu tempat untuk menyetel ulang padding pada kolom.

JSideris
sumber
Atau, Anda memiliki Bootstrap versi lama. Misalnya, 3.0.0 didistribusikan dengan VS2015. Lihat github.com/twbs/bootstrap/issues/8959
Petualangan