Html 如何使用bootstrap制作100%宽度的表单？

我试图使3个表单框相互内联，但宽度为100%（但能够指定每个部分的宽度，甚至更好，将最后两个表单部分设置为其自动/标准大小，并使第一个部分填充剩余空间）

目前我有：

<div class="row">
 <form class="form-inline" role="form" name="input" action="LINK_HERE" method="post">
  <div class="form-group">
   <label class="sr-only" for="lg_query">Label</label>
   <input type="text" class="form-control" name="query" id="lg_query" placeholder="Placeholder" autofocus="autofocus" value="VALUE" required />
  </div>
  <div class="form-group">
   <label class="sr-only" for="SOMEID">text</label>
   <select class="form-control">
    <option value="1">se</option>
    <option value="3" selected>ros</option>
    <option value="14">rds</option>
    <option value="4">sbh</option>
    <option value="7">sc</option>
    <option value="8">rcs</option>
    <option value="9">rns</option>
    <option value="10">rws</option>
    <option value="12">rps</option>
   </select>
  </div>
  <button type="submit" class="btn btn-default" name="module1"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
 </form>   
</div><!-- /.row -->

标签
文本
东南方
活性氧
无线电数据系统
sbh
sc
雷达散射截面
rns
rws
rps
编辑

---

非常感谢

通常的方法是简单地使用Bootstrap的网格：

下面是一个具有更好的块布局和宽度变化的示例：

---

非常感谢@isherwood添加JSFIDLE！我不知道如何使用它添加引导和jQuery内容。太棒了！你的第二个链接（版本4）正是我所需要的！非常感谢你。现在开始实施并整理不同的设备宽度。：）

<div class="col-xs-4">