如何在表单内联 100% 宽度中进行输入？

Question

https://jsfiddle.net/3xt5q25s/

<div class="container">
<div class="row">

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default pull-right">Send invitation</button>
</form>

</div>
</div>

正如您在示例中看到的那样，输入不会占用所有空间。

如何使其宽度为 100%（输入的右边框在按钮旁边）？

不一定非要form或form-inline，我只想把label/input/button放在一行。

Answer 1

如果您想确保它们保持在一行并且文本输入触摸按钮，请考虑使用表单输入组：

<div class="input-group">
   <input type="email" class="form-control">
   <span class="input-group-btn">
      <button class="btn btn-default" type="submit">
          Send invitation
      </button>
   </span>    
</div>