Foundation 輸入框?尺寸
使用網格的列來設置輸入框的大小，如.large-6 , .medium-6 ,等。
更多網格系統知識，可以點擊網格系統教程。
實例
< 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 >
< 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 >
< 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 >
嘗試一下»
內聯標籤
如果你希望你的標籤內容顯示在左邊（不是上邊），可以將標籤元素label放在輸入框左邊的不同的列上，並使用.inline類來設置垂直居中:
實例
< 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 >
< 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 >
嘗試一下»
前置和後置標籤
你可以在<div class="row collapse">中添加前置和後置標籤，元素為： < element class="postfix">或< element class="prefix"> 。 可以使用網格系統來設置前置和後置標籤的大小：
實例
< 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 >
< 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 >
嘗試一下»
前置和後置標籤按鈕
可以使用<a>元素添加.button類來設置前置和後置按鈕:
前置和後置標籤圓角按鈕
實例
< 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 >
< 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 >
嘗試一下»