css - 将文本输入和按钮全宽组合在响应式布局中？

Question

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

我正在使用 Twitter Bootstrap 3，但我看不到他们为此提供的任何类。

我试过在容器上使用显示表格并在子项上使用显示表格单元格，但它确实有效，我假设文本输入确实以与 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>