Question

使用新的bootstrap，你不能设置textbox lenght，所以我想知道如何编写以下代码：

http://i.stack.imgur.com/YGoUK.png

它应该尽可能聪明和简单。

Answer 1

您可以使用表单内联和表单组（清理html，为您的情况添加仅限sr的标签）：

<form class="form-inline my-form-inline" role="form">

<label>Test&nbsp;</label>

<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
-
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
-
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
-
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>

<button type="submit" class="btn btn-primary">Sign in</button>
</form>

</div>

然后调整css（你需要调整）：

.my-form-inline .form-group {display:inline-block!important;}
.my-form-inline .form-control {width:100%;display:inline-block!important;}


@media (min-width:500px) {

.my-form-inline .form-group {display:inline-block!important;}
.my-form-inline .form-control {width:80px;display:inline-block!important;}

}

DEMO：http://jsbin.com/OGoZUye/1/edit

bootstrap 3.0.3内联形式：标签，4个文本框，按钮

1 个答案: