Bootstrap中.row的用途是什麼？

根據Bootstrap's documentation Bootstrap中.row的用途是什麼？

行必須放在一個.container（固定寬度）內或.container-fluid（全寬）

和

使用行創建水平專欄組。

爲什麼這是必要的？

一個.row只能佔據既然你必須關閉它似乎更長的時間來寫.row任.container或.container-fluid

最大寬度：

<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>

來源

2016-10-10 Andy

'.container'可以包含多個'row'。例如你想要一個帶有3個「col」的「行」和一個帶有5個「col」的行。每一個'col's你把它們包裝在一個'row'裏面，然後''container'裏面的'row's。這是關於分離項目和有一個整潔的結構。 –

集裝箱

容器在響應寬度上提供寬度約束。當響應大小發生變化時，容器會發生變化。行和列都是基於百分比的，所以他們不需要改變。請注意，每邊有15px的邊距，被行取消。

行

行應始終在一個容器中。

該行爲列提供了一個可以居住的地方，理想情況下列中的列可以合計爲12.它也充當包裝器，因爲所有的列浮動左邊，其他行浮動時變得沒有重疊。

行的每邊也有15px的負邊距。組成該行的div通常會被限制在容器的填充內，觸及粉紅色區域的邊緣，但不會超出。 15px的負邊緣將行推出容器頂部的15px填充，實質上否定它。此外，行確保您內部的所有div都出現在自己的行上，與上一行和下一行分開。

列

的欄目有15px的填充。此填充意味着列實際上會觸及行的邊緣，該行本身會觸及容器的邊緣，因爲該行具有負邊距，並且容器具有正填充。但是，列上的填充將列內的任何內容推送到需要的位置，並且還在列之間提供30像素的裝訂線。切勿在行外使用列，否則無法工作。

欲瞭解更多信息，我建議您閱讀this article。它非常清楚，並且很好地解釋了Bootstrap的網格系統是如何工作的。

來源

2016-10-10 14:37:12 Mistalis

雖然容器具有全寬度，但行通常指定了「max-width」。比行還清除裏面的浮動，還有很多其他的東西你可以考慮，作爲背景圖像，內部元素的進一步定位等。沒有必要，也許不需要，但在框架中計劃和推薦。 – skobaljic

@Mistalis感謝您的詳細解釋。您提供的文章鏈接非常好。我建議任何人閱讀那篇文章，如果他們有這個相同的問題。那裏的圖表非常有用。 – Andy

很高興我幫助:) – Mistalis

.row元素在兩邊都有負邊距。所有的列都有一個填充關注間隔，即使是第一個和最後一個（這是我們不想要的），所以.row將它們拉回來解決這個問題。另外，我認爲在容器中放置更多行而不是列會更有意義。

來源

2016-10-10 14:38:42

Bootstrap中.row的用途是什麼？

回答

相關問題