wrf 嵌套網格作用

介紹 (Introduction)

In the previous article, we have learnt what is grid and grid system and how it works? Now, we will learn about how Responsive column, Nesting Columns and Offset Columns works and how to use them? If you have any doubt, feel free to ask in the comment section.

在上一篇文章中，我們了解了什么是網格和網格系統以及它如何工作 ？ 現在，我們將了解響應列，嵌套列和偏移列的工作方式以及如何使用它們 ？ 如有任何疑問，請隨時在評論部分提問。

響應列 (Responsive Columns)

We know that we have four grid classes (xs, sm, md, lg). So, in these Responsive columns, we use one or all four grid for layout, according to the device or viewport size. It’s up to you in how many columns you want to divide Grid individually in your page; on different devices and how many columns group you want on different devices.

我們知道我們有四個網格類( xs ， sm ， md ， lg )。 因此，在這些“響應式”列中，根據設備或視口的大小，我們使用一個或所有四個網格進行布局。 由您決定要在頁面中分別劃分Grid的幾列； 在不同的設備上，以及您希望在不同的設備上有多少列組。

Example:

例：

In the following example, the layout has been divided into two grid class (sm & md) for different device viewport. We are dividing here columns for small devices as .col-sm-4, .col-sm-4, .col-sm-4 and for large device.col-md-4 .col-md-3, .col-md-5.

在以下示例中，針對不同的設備視口，布局已分為兩個網格類( sm ＆ md )。 對于小型設備，我們在這里劃分列為.col-sm-4 ， .col-sm-4 ， .col-sm-4和大型設備 .col-md- 4.col -md-3 ， .col-md -5 。

<! ---------- Responsive columns ---------->
<h2 style="color:blue;">Responsive Columns</h2><br />
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-3">
<h3 style="background-color:skyblue;text-align:center;">
we use 4 col in small and 3 col in large device in 12 columns.
</h3>
</div>
<div class="col-sm-4 col-md-5">
<h3 style="background-color:yellow;text-align:center;">
we use 4 col in small and 5 col in large device in 12 columns.
</h3>
</div>
<div class="col-sm-4 col-md-4">
<h3 style="background-color:pink;text-align:center;">
we use 4 col in small and 4 col in large device in 12 columns.
</h3>
</div>
</div>
</div>

嵌套列 (Nesting Columns)

It is similar to something we have already used, that is; the nested loop and conditional statement in programming languages (In C, C++ & other). To test your content, you have to add a row and col-*-* class within an existing col-*-* class.

它類似于我們已經使用過的東西，即； 編程語言(在C，C ++和其他語言中)的嵌套循環和條件語句。 要測試你的內容，你必須添加一個ROW和COL - * - - *類現有的山坳內*類- *。

Note: The nested row should include scales up to 12 columns as the device or viewport.

注意：嵌套的行最多應包含12列作為設備或視口的比例。

Example:

例：

In the following example, layout has been divided into two columns .col-sm-8 and .col-sm-4 both are split into two parts, In which first one is split into .col-sm-4 and .col-sm-8 & second is split into .col-sm-6 and .col-sm-6.

在下面的示例中，布局已分為兩列。.col-sm-8和.col-sm-4都分為兩部分，其中第一個部分分為.col-sm-4和.col-sm -8 ＆秒分為.col-sm-6和.col-sm-6 。

<!----------- Nesting Columns --------------->
<h2 style="color:blue;">Nesting Columns</h2><br />
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h3 style="background-color:lightgreen;text-align:center;"> 
we use 8 columns in 12 columns.
</h3>
<div class="row">
<div class="col-sm-4">
<h5 style="background-color:Aqua;text-align:center;">4 col</h5>
</div>
<div class="col-sm-8">
<h5 style="background-color:Aqua;text-align:center;">8 col</h5> </div>
</div>
</div>
<div class="col-sm-4">
<h3 style="background-color:lightgrey;text-align:center;">
we use 4 columns in 12 columns.
</h3>
<div class="row">
<div class="col-sm-6">
<h5 style="background-color:Aqua;text-align:center;">6 col</h5>
</div>
<div class="col-sm-6">
<h5 style="background-color:Aqua;text-align:center;">6 col</h5> 
</div>
</div>
</div>
</div>
</div>

Mobile and tablet view for Both Responsive and Nesting columns:

響應式和嵌套式列的移動設備和平板電腦視圖：

Desktop view for Both Responsive and Nesting columns:

響應列和嵌套列的桌面視圖：

偏移列 (Offset Columns)

You can also use offset grid columns. It provides a specialized layout. It also has four grid classes. For this, we have to use offset -*-*. These classes are used to increase the left margin of columns where columns can move an only right side and we increase left margin to the columns by using offset -*-* and it ranges from 1-11. Margins are more useful for quick layouts where the variable is the width of the offsets.

您也可以使用偏移網格列。 它提供了專門的布局。 它還具有四個網格類別。 為此，我們必須使用offset -*-* 。 這些類用于增加列的左邊距，其中列只能向右移動，我們通過使用偏移量-*-*來增加列的左邊距，范圍為1-11。 邊距對于變量為偏移寬度的快速布局更有用。

Example:

例：

In the following example, specialized layout is used and divided into two columns (col-md-4 col-sm-4 col-lg-4) and (col-md-4 col-sm-4 col-lg-4). Here, we use offset in both the splitted columns offset-md-2 & offset-md-1 as you can see in the example. Under this spitted two columns we again use offset in contact; we use offset for margin where offset-md-2 & offset-md-0 moves over columns col-md-4 col-sm-4 col-lg-4 offset-md-2 & col-md-4 col-sm-4 col-lg-4 offset-md-1.

在以下示例中，使用專用布局并將其分為兩列( col-md-4 col-sm-4 col-lg-4 )和( col-md-4 col-sm-4 col-lg-4 )。 在此示例中，我們在兩個拆分列中使用了offset偏移量offset-md-2和offset-md-1 。 在這個分散的兩列下，我們再次使用偏移量接觸； 我們使用offset作為余量，其中offset-md-2和offset-md-0在列col-md-4 col-sm-4 col-lg-4 offset-md-2和col-md-4 col-sm-上移動4 col-lg-4 offset-md-1 。

<!----------- Offset Columns --------------->
<h2 style="color:blue;">Offset Columns</h2>
<br />
<div class="container-fluid">
<div class="row">
<div class= "col-md-4 col-sm-4 col-lg-4 offset-md-2">
<h1>Contact</h1>
<br>
<div class="row">
<div class="col-sm-8 col-lg-5 offset-md-2">
<form action="" target="_blank">
<p><input type="text" placeholder="Name" class="box" required name="Name"></p>
<p><input	type="text"
placeholder="Comments"	required	name="Comment"	class="box"
style=" height:150px;"></p>
<p><button style="color:black; margin-left:35%" class="btn btn-info" type="submit"><b>SUBMIT</b></button></p>
</form>
</div>
</div>
<div class= "col-md-4 col-sm-4 col-lg-4 offset-md-1">
<h1>Contact</h1>
<br>
<div class="col-md-5 col-lg-5 offset-md-0">
<form action="" target="_blank">
<p><input type="text" placeholder="Name" class="box" required name="Name"></p>
<p><input	type="text"
placeholder="Comments"	required	name="Comment"	class="box"
style=" height:150px;"></p>
<p><button style="color:black; margin-left:35%" class="btn btn-info" type="submit"><b>SUBMIT</b></button></p>
</form>
</div>
</div>

Mobile and tablet view for Offset columns:

偏移列的移動設備和平板電腦視圖：

Desktop view for Offset columns:

偏移列的桌面視圖：

Conclusion:

結論：

So, Let’s conclude with what we have learnt here.like-what is Responsive columns, Nesting columns, Offset Columns and how to use them, with examples. I hope now, you gained an insight into how can we use these different amazing classes for creating a responsive page. Stay tuned for the next article. We will dig deeper and discover more about Bootstrap. See you in the next Article! Happy Learning!

因此，讓我們以在這里學到的內容作為結束。例如-什么是響應列，嵌套列，偏移列以及如何使用它們，并帶有示例。 我希望現在，您了解了我們如何使用這些不同的驚人類來創建響應式頁面。 請繼續關注下一篇文章。 我們將更深入地探索并發現更多有關Bootstrap的信息。 下篇再見！ 學習愉快！

翻譯自: https://www.includehelp.com/html/use-of-responsive-nesting-columns-and-offset-columns-in-grid-system-bootstrap.aspx

wrf 嵌套網格作用