在responsivelayout中组合文本输入和按钮全宽？

Question

我有一个响应式布局。一个块有一个表单输入和按钮。如何使元素的总宽度为100％？

我正在使用Twitter Bootstrap 3，但我无法看到他们为此提供的任何课程。

我已经尝试在容器上使用显示表并在子节点上显示表格单元格但它确实有效，我假设文本输入doenst以与div相同的方式呈现样式。

我可以使用绝对定位，但如果按钮的文本被延长，CSS就会中断。所以我宁愿清楚这种方法。

我不想设置固定的％宽度，例如输入为80％，按钮为20％。我希望按钮占据它所需的空间，并让输入采取任何剩下的东西。

http://codepen.io/anon/pen/jEPoRG

<div class="form-group">
   <input type="text" placeholder="Search">
   <button type="submit" class="btn btn-default">Submit</button>
</div>

.form-group {
  background: grey;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

Answer 1

如果在搜索栏周围放置div，则可以在.form-submit及其子项上使用display：table / table-cell。我假设.search_bar_div的宽度是自动的，但是并没有完全延伸。但后来我尝试了100％，这似乎是你想要的工作。

我只测试了Mozilla和Chrome。

<style type="text/css">
 .form-group {
    background: grey;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    display: table;
  }

  .search_bar_div {
    width: 100%;
    display: table-cell;
  }

  .form-group .search_bar_div #search_bar {
    width: 100%;
  }

  .form-group .btn {
    display: table-cell;
  }
</style>

<div class="form-group">
  <div class="search_bar_div">
    <input id="search_bar" type="text" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</div>