HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The last chapter we introduced the proportion of medium-sized equipment and small equipment grid layout, small equipment for the 25% / 75% (.small-3 and .small-9), but the proportion of medium-sized equipment for 50% / 50% (.medium-6 and .medium-6):
<div class="small-3 medium-6 columns">/en/en</div> <div class="small-9 medium-6 columns">/en/en</div>
On large-scale equipment, we recommend a ratio of 33% / 66%.
Tip: The screen size is larger than the definition of large equipment 64.0625em.
The use of large equipment .large-*
category.
Now we add two on the large-scale equipment:
<div class="small-3 medium-6 large-4 columns">/en/en</div> <div class="small-9 medium-6 large-8 columns">/en/en</div>
.small-3
and .small-9
) .medium-6
and .medium-6
) .large-4
and .large-8
) Note: To ensure that the number of columns add up to 12! |
The following example, we specify .large-6
class (and not .medium- * .small-*
). This indicates that a large proportion of the equipment is 50% / 50%. But in the medium-sized or small appliance horizontally stacked (100% width):