Bootstrap 3 - Satır sınıfı neden kapsayıcıdan daha geniştir?

116

Bootstrap 3'ü kullanmaya yeni başladım. Row sınıfının nasıl çalıştığını anlamakta zorlanıyorum. Önlemek için bir yol var mı padding-leftve 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
kaynak

@Adrift bu hala doğru mu? Doğru çalışmadıklarını mı kastettiğinden emin değilim, çünkü onları kullanıyorum ve gerektiği gibi çalışıyorlar.

— Mısır gevreği

1

@ Tahıl: Artık değil. Bu edilmiş eklendi v3.0.2 içinde

— başıboş

3

çünkü bootstrap satırında -15px sol ve sağ kenar boşlukları vardır.

Muhtemelen senin problemin değil ama aynı türden sorunu olan herkes için: div'lerinizde yalnızca bir sınıf özniteliğine sahip olduğunuzdan emin olun. Yanlışlıkla ikiye katladım ve aynı sorunu yaşadım.

— The One True Colter

151

Tüm grid sistemlerinde, her kolon arasında oluklar bulunur. Bootstrap'in sistemi, bu cilt payını oluşturmak için her sütunun hem solunda hem de sağında 15 piksellik bir dolgu ayarlar.

Sorun, ilk sütunun solunda yarım oluk olmaması ve son sütunun sağında yarım oluk olmamasıdır. Bu sütunlarda bazı grid sistemlerinin yaptığı gibi bir tür .firstveya .lastsınıf kullanmak yerine, bunun yerine .rowsınıfı sütunların dolgusuyla eşleşen negatif kenar boşluklarına sahip olacak şekilde ayarlarlar. Bu, olukları ilk ve son sütunlardan "çeker" ve aynı zamanda onu genişletir.

.rowDiv gerçekten ızgara sütunları dışında tutma hiçbir şeye asla kullanılmamalıdır. Eğer öyleyse, kemanınızda da görüldüğü gibi, içeriğin herhangi bir sütuna göre değiştiğini göreceksiniz.

GÜNCELLEME:

Ben cevapladıktan sonra sorunuzu değiştirdiniz, işte şimdi sorduğunuz sorunun cevabı: .containerSınıfı ilkine ekleyin <div>. Çalışma örneğine bakın .

— Sean Ryan
kaynak

2

Izgara sütun dolgu, (BS3 olarak) marj ile ayrılır

— başıboş

3

Harika! Bu taşan tüm içeriği açıklıyor.

— Rutwick Gangurde

27

Bootstrap 3.3.7 ile bu problem .row'u .container-Fluid ile sararak çözüldü.

— dbarma
kaynak

Bu benim için işe yaradı, başlangıçta olmadığını düşünmüş olsam da, çünkü geliştiricinin web konsolunu açarak genişliği azaltıyordu, ama görünüşe göre bunu da berbat ediyor. .container-fluidBurada kullanılması da önerildi: stackoverflow.com/a/23616447/5272567

— Matthias

sarma div konumu olduğunda da çalışır absolute. ipucu için teşekkürler

— InsOp

bu yanıtı birden çok kez

— yükseltebilseydim

Bootstrap 4 için de aynı düzeltme

— Rob L

19

Aşağıdaki benzer gönderiye cevabımı görün.

Bootstrap .row neden -30px varsayılan sol marjına sahip?

Temelde "satır" yerine "temizle" kullanırsınız. Negatif marjı hariç tutarak "satır" ile tamamen aynı işlevi görür.

— Kyle
kaynak

2

Bu sınıflar, görsel olarak yapıyor gibi görünseler de iki farklı şey yaparlar. Net, duyarlı durumlarda o kadar esnek değildir ve grid sistemlerinde .row'un davranışı doğrudur.

— Todd Baur

Bu, paketleyicinin dışındaki taşan içeriği çözer.

— Bhojendra Rauniyar

Ancak daha iyi bir yol, satırı kapla sarmaktır.

— Bhojendra Rauniyar

EN İYİ ASWER! UP!

— Anderson Bressane

18

Konteyner sınıfının içindeki satır sınıfını kullandım ve hala bazı problemler yaşadım. Ben eklendiğinde margin-left: auto; margin-right: auto;için .rowsınıfın o cezayı çalıştı.

— Jeffrey
kaynak

8

Bu harika çalıştı! Bootstrap 4'e 'mx-auto' sınıfını eklemek, benim için taşma sorununu çözdü.

— Michelle M.

3

@Michelle M., bu Cevap için tam not almalıdır.
Yorumlardan birinde şunları söyledi:

Bootstrap 4'e 'mx-auto' sınıfını eklemek, benim için taşma sorununu çözdü.

İlk divElementinizi şu şekilde güncellemeniz gerekir :

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

Tüm İç İçe Satırlar için bunu yapmanıza gerek yoktur (eğer varsa). Dikey Kaydırma Çubuğundan kaçınmak için en dıştaki (veya Satırlara)
eklemeniz yeterlidir. Kenar Boşluklarını değiştirmek için bir "satır" sınıfı ekleyerek tüm Bootstrap Satırlarının davranışını Geçersiz Kılmayın.mx-autorow

— MikeTeeVee
kaynak

1

Bu sorunu gideren gelecekteki geliştiriciler için:

Bootstrap, satır sütunları için dolguyu ayarlar, böylece bir satırın içeriğinin hiçbiri kabın dışında görünmemelidir. Eğer bunu yaşıyorsanız ve col -... sınıflarını kullanarak bootstrap'in grid sistemini doğru bir şekilde kullanıyorsanız, büyük olasılıkla bir yerde sütunlardaki dolguyu sıfırlayan ek CSS'ye sahip olabilirsiniz.

— JSideris
kaynak

Veya Bootstrap'in eski bir sürümüne sahipsiniz. Örneğin, 3.0.0 VS2015 ile dağıtılır. Bkz. Github.com/twbs/bootstrap/issues/8959

— Macera