表單項 水平排列

2021-08-20 04:56:12 字數 1889 閱讀 8675

<

form

class=

"form-horizontal"

>

<

div

class=

"form-group"

>

<

label

for=

"inputemail3"

class=

"col-sm-2 control-label"

>email

label

>

<

div

class=

"col-sm-10"

>

<

input

type=

"email"

class=

"form-control"

id="inputemail3"

placeholder=

"email"

>

div>

div>

<

div

class=

"form-group"

>

<

label

for=

"inputpassword3"

class=

"col-sm-2 control-label"

>password

label

>

<

div

class=

"col-sm-10"

>

<

input

type=

"password"

class=

"form-control"

id="inputpassword3"

placeholder=

"password"

>

div>

div>

<

div

class=

"form-group"

>

<

div

class=

"col-sm-offset-2 col-sm-10"

>

<

div

class=

"checkbox"

>

<

label

>

<

input

type=

"checkbox"

> remember me

label

>

div>

div>

div>

<

div

class=

"form-group"

>

<

div

class=

"col-sm-offset-2 col-sm-10"

>

<

button

type=

"submit"

class=

"btn btn-default"

>sign in

button

>

div>

div>

form

>

通過為表單新增.form-horizontal類,並聯合使用bootstrap預置的柵格類,可以將label標籤和控制項組水平併排布局

這樣做將改變.form-group的行為,使其表現為柵格系統中的行(row),因此就無需再額外新增.row 了

表單項介紹

1 doctype html 2 html 3 head 4 meta charset utf 8 5 title title 6head 7 body 812 1314 19 form action target.html 2024 2529 fieldset 3031 32 legend 使用者...

表單項 內聯表單

form class form inline div class form group label for exampleinputname2 name label input type text class form control id exampleinputname2 placeholder...

ElementUI動態增減表單項

增加新選項 增加新選項 const option export default rules answers options methods 將keys歸位 for let i 0 i this.formdata.optionslist.length i 將答案歸位 單選 this.formdata....