Bootstrap'te .row'un amacı nedir? <a href="http://getbootstrap.com/css/" rel="nofollow noreferrer">Bootstrap's documentation</a> göre

Question

Sıralar bir .container (sabit genişlikte) içinde yerleştirilmelidir veya .container-fluid (tam genişlikli)

ve

kullanımı sıraları yatay oluşturmak sütun grupları.

Bu neden gereklidir?

A .row sadece bunu yazmak için uzun görünüyor .row kapatmak zorunda olduğu göz önüne alındığında, ya .container veya .container-fluid

maksimum genişliğini işgal edebilir: Bu daha

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Column A</h1> 
     </div> 
     <div class="col-md-6"> 
      <h1>Column B</h1> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Column C</h1> 
     </div> 
     <div class="col-md-6"> 
      <h1>Column D</h1> 
     </div> 
    </div> 
</div> 

:

<div class="container"> 
    <div class="col-md-6"> 
     <h1>Column A</h1> 
    </div> 
    <div class="col-md-6"> 
     <h1>Column B</h1> 
    </div> 
</div> 

<div class="container"> 
    <div class="col-md-6"> 
     <h1>Column C</h1> 
    </div> 
    <div class="col-md-6"> 
     <h1>Column D</h1> 
    </div> 
</div> 

Answer 1

Konteynır

Kapsayıcı, genişlik sınırlamaları üzerinde genişlik kısıtlamaları sağlar. Duyarlı boyutlar değiştiğinde, değişen kapsayıcıdır. Satırlar ve sütunlar, tümünün yüzdesini temel alır, böylece değişmesi gerekmez. Her iki tarafta 15 piksel kenar boşluğu olduğunu, satırlarla iptal edildiğini unutmayın.

---

satır

Sıralar, her zaman bir kap olmalıdır.

Satır, sütunlar için ideal bir şekilde 12'ye kadar sütunlar içeren, yaşayabileceğiniz bir yer sağlar. Ayrıca, tüm sütunlar solda kalacağından sarmalayıcı gibi davranır, yüzen satırlar garip olduğunda ek satırlar çakışmaz.

Satırların her iki tarafında da 15 piksellik bir negatif kenar boşluğu var. Sırayı oluşturan div normalde, konteynerin dolgusunun iç kısmında, pembe alanın kenarlarına değecek şekilde değil, ancak bunun ötesinde bir sınırlama olacaktır. 15px'lik negatif kenar boşlukları, sırayla onu reddederek, kapları 15px dolgu malzemesinin üstünden dışarı itiyor. Ayrıca, satırlar, içindeki tüm divların kendi satırlarında, önceki ve sonraki satırlardan ayrı olarak göründüğünden emin olmanızı sağlar.

---

Sütunlar

sütunlar artık 15px dolgu olması. Bu dolgu, sütunların, satırın kenarına temas ettiği, yani satırın negatif marjı içerdiğinden ve konteynerin pozitif dolguya sahip olmasından dolayı, kabın kenarına değdiği anlamına gelir. Ancak, sütunun üzerindeki dolgu, sütunun içerisindeki herhangi bir yere olması gereken yere iter ve ayrıca sütunlar arasında 30px oluk sağlar. Asla bir satırın dışında bir sütun kullanmayın, işe yaramaz.

---

Daha fazla bilgi için, this article'u okumanızı öneririm. Bu gerçekten açık ve Bootstrap'ın ızgara sisteminin nasıl çalıştığını iyi açıklıyor.

Answer 2

.row öğelerinin her iki tarafında da negatif kenar payı vardır. Tüm sütunlar, ilk ve sonuncu (hatta istemediğimiz bir şey) bile aralıklarla ilgilenen bir dolguya sahiptir, böylece .row bunları düzeltmek için geri çeker. Ayrıca, sütunlar yerine bir kapta daha fazla satır olması daha mantıklı.