引导3.0.3内嵌形式：标签，文本框4，按钮

Question

有了新的引导，不能设置文本框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