如何在bootstrap-3的form-group下的标签后水平对齐多个文本框

Question

如何在bootstrap-3的form-group下的标签后水平对齐多个文本框我的输出是

但是我想得到像

我尝试使用此代码

<div class="form-group">
     <label for="mobile" >Mobile</label>
     <input type="text" class="form-control isd-code" name="mobile[]" placeholder="88">
     <span class="dash"> - </span>
     <input type="text" class="form-control mobile" name="mobile[]" placeholder="Enter Name">
</div>

Answer 1

如Bootstrap的Inline Forms文档中所述 ，您首先需要为您的form元素提供一个“ form-inline”类：

<form class="form inline" ... >

然后将每个单独的内联表单元素包装在.form-group容器中：

<div class="form-group">
  <label for="mobile" >Mobile</label>
  <input type="text" class="form-control isd-code" name="mobile[]" placeholder="88">
</div>
<span class="dash"> - </span>
<div class="form-group">
  <input type="text" class="form-control mobile" name="mobile[]" placeholder="Enter Name">
</div>