使用网格的列来设置输入框的大小,如 .large-6
, .medium-6
, 等。
目前创新互联已为上1000+的企业提供了网站建设、域名、网站空间、网站托管、服务器租用、企业网站设计、兴和网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
更多网格系统知识,可以点击 网格系统 教程。
<
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
>
尝试一下 »
如果你希望你的标签内容显示在左边(不是上边),可以将标签元素 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
>
尝试一下 »
你可以在 < 可以使用 < <
本文标题:创新互联Foundation教程:Foundation输入框尺寸
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联
<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
>
尝试一下 »前置和后置标签按钮
元素添加
.button
类来设置前置和后置按钮:实例
a
href=
"#"
class=
"postfix button"
>Go
<
/a
>
尝试一下 »前置和后置标签圆角按钮
实例
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
>
尝试一下 »
地址分享:http://www.gawzjz.com/qtweb2/news16/3616.html