Bootstrap 3：input-group与不同大小的非input-group混合使用

Question

如果一个表单中有多个控件，其中一些控件是input-group div的一部分，而其他控件不是，则有没有办法使它们都占用相同的空间？我的目标是让所有输入控件具有相同的宽度（即带有附加组件的控件的宽度）。

以下是我未能成功的尝试：

<form class="form-horizontal" role="form">
  <div class="form-group col-xs-12">
    <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
    <div class="col-xs-10 input-group">
        <span class="input-group-addon">$</span>
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-xs-2 control-label">Password</label>
    <div class="col-xs-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
</form>

http://jsfiddle.net/8XhCL/1/

- mlapaglia

Answer 1

试试这个：

<form class="form-horizontal" role="form">
   <div class="form-group col-xs-12">
      <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
      <div class="col-xs-10">
         <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
         </div>
      </div>
   </div>
   <div class="form-group col-xs-12">
   <label for="inputPassword3" class="col-xs-2 control-label">Password</label>
   <div class="col-xs-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
   </div>
</form>

将一个具有类名为"input-group"的新

标签与类名为"col-xs-10"的

标签分离。

- Leonardo Delfino