在没有输入字段的情况下拉伸输入组

Question

可能是滥用Bootstrap的输入组组件，但应该是可以实现的。

这就是我所拥有的：

以下是我想要的方式：

需要修复的代码：

<div class="cont">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">foo</span>
      <span class="input-group-text">bar</span>
      <span class="input-group-text">This should stretch.</span>
    </div>
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">baz</button>
      <button class="btn btn-secondary" type="button">qux</button>
    </div>
  </div>
</div>

div.cont {
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}

小提琴：https://jsfiddle.net/37o25zay/

Answer 1

使用bootstrap css qazxsw poi允许元素增长并填充剩余空间（qazxsw poi）

flex-grow-1

https://getbootstrap.com/docs/4.2/utilities/flex/#grow-and-shrink