In the previous section, we introduced the grid layout for medium and small devices, where the proportion used on small devices is 25%, 75% (.small-3 and .small-9), but on medium-sized devices, it is 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%. Medium-6 and. Medium-6):
<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>
The recommended ratio for large equipment is 33% Universe 66%.
提示: The definition of screen size for large devices is larger than 64.0625em.
Used on large equipment
.large-*
Class.
Now let’s add two columns to the large device:
<div class="small-3 medium-6 large-4 columns">....</div>
<div class="small-9 medium-6 large-8 columns">....</div>
8.35.1. Analysis ¶
The ratio of two columns for small devices is 25% ram 75%. (
.small-3And.small-9)The ratio of two columns for medium-sized devices is 50% Plus 50%. (
.medium-6And.medium-6)The ratio of two columns for large equipment is 33% and 66%. (
.large-4And.large-8)
Example ¶
<div class="row">
<div class="small-3 medium-6 large-4 columns"
style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="small-9 medium-6 large-8 columns"
style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>
注意: Make sure the columns add up to 12 columns!
8.35.2. Use only on large equipment ¶
In the following example, we specify
.large-6
Class (not .medium -* 和 `` .small-* `` ). This indicates that the ratio is 50% on large equipment. However, it will stack horizontally (100% width) on medium or small devices:Example ¶
<div class="row">
<div class="large-6 columns" style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="large-6 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>