如何以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>