Foundation enters the box size

May 04, 2021 Foundation5

1. Foundation enters the box size

2. 相等大小列

3. 内联标签

4. Front and rear labels

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

尝试一下 »

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 >

尝试一下 »

Foundation enters the box size

Table of contents

Foundation enters the box size

Instance

相等大小列

实例

内联标签

Instance

Front and rear labels

Instance

Front and rear label buttons

Instance

Front and rear label fillet buttons

Instance

Cookie Consent