html - 如何在 bootstrap-3 中的表单组下的标签后水平对齐多个文本框

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's Inline Forms documentation 中所述，你需要首先给你的 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>