Foundation enters the box size


May 04, 2021 13:00 Foundation5


Table of contents


Foundation enters the box size

Use grid columns to set the size of input boxes, .large-6 .medium-6 and so on.

For more knowledge of grid systems, you can click on the Grid Systems tutorial.

Instance

< form >
< div class= "row" >
< div class= "large-10 medium-7 columns" >
< label > large-10 medium-7 (100% on small)
< input type= "text" placeholder= "Name" >
< /label >
< /div >
< /div >

< div class= "row" >
< div class= "small-5 columns" >
< label > small-5
< input type= "text" placeholder= "Name" >
< /label >
< /div >
< /div >

< div class= "row" >
< div class= "medium-3 columns" >
< label > medium-3 (100% on small)
< input type= "text" placeholder= "Name" >
< /label >
< /div >
< /div >
< /form >

尝试一下 »

相等大小列

以下演示了相等大小列的实例:

实例

< form >
< div class= "row" >
< div class= "medium-4 columns" >
< label > medium-4 (100% on small, stacked)
< input type= "text" placeholder= "Name" >
< /label >
< /div >

< div class= "medium-4 columns" >
< label > medium-4 (100% on small, stacked)
< input type= "text" placeholder= "Name" >
< /label >
< /div >

< div class= "medium-4 columns" >
< label > medium-4 (100% on small, stacked)
< input type= "text" placeholder= "Name" >
< /label >
< /div >
< /div >
< /form >

尝试一下 »

内联标签

If you want your label content to appear on the left (not above), you can place the label element label on a different column on the .inline class to set vertical centering:

Instance

< form >
< div class= "row" >
< div class= "small-8" >
< div class= "row" >
< div class= "small-3 columns" >
< label for= "name" class= "inline right" > Name < /label >
< /div >
< div class= "small-9 columns" >
< input type= "text" id= "name" placeholder= "First Name.." >
< /div >
< /div >
< /div >
< /div >
< /form >

尝试一下 »

Front and rear labels

You can add pre- and post-labels to the < element class="prefix"> <div class="row collapse"> < element class="postfix"> You can use the grid system to set the size of the front and rear labels:

Instance

< form >
< div class= "row" >
< div class= "large-6 columns" >
< div class= "row collapse prefix-radius" >
< div class= "small-3 columns" >
< span class= "prefix" > Prefix < /span >
< /div >
< div class= "small-9 columns" >
< input type= "text" placeholder= "Value" >
< /div >
< /div >
< /div >
< div class= "large-6 columns" >
< div class= "row collapse postfix-radius" >
< div class= "small-9 columns" >
< input type= "text" placeholder= "Value" >
< /div >
< div class= "small-3 columns" >
< span class= "postfix" > Postfix < /span >
< /div >
< /div >
< /div >
< /div >
< /form >

尝试一下 »

Front and rear label buttons

You <a> element to add a .button class to set the front and rear buttons:

Instance

< a href= "#" class= "postfix button" > Go < /a >

尝试一下 »

Front and rear label fillet buttons

Instance

< form >
< div class= "row" >
< div class= "large-6 columns" >
< div class= "row collapse prefix-radius" >
< div class= "small-3 columns" >
< span class= "prefix" > Prefix < /span >
< /div >
< div class= "small-9 columns" >
< input type= "text" placeholder= "Value" >
< /div >
< /div >
< /div >
< div class= "large-6 columns" >
< div class= "row collapse postfix-radius" >
< div class= "small-9 columns" >
< input type= "text" placeholder= "Value" >
< /div >
< div class= "small-3 columns" >
< span class= "postfix" > Postfix < /span >
< /div >
< /div >
< /div >
< /div >
< div class= "row" >
< div class= "large-6 columns" >
< div class= "row collapse prefix-round" >
< div class= "small-3 columns" >
< a href= "#" class= "button prefix" > Go < /a >
< /div >
< div class= "small-9 columns" >
< input type= "text" placeholder= "Value" >
< /div >
< /div >
< /div >
< div class= "large-6 columns" >
< div class= "row collapse postfix-round" >
< div class= "small-9 columns" >
< input type= "text" placeholder= "Value" >
< /div >
< div class= "small-3 columns" >
< a href= "#" class= "button postfix" > Go < /a >
< /div >
< /div >
< /div >
< /div >
< /form >

尝试一下 »