html - 没有输入字段的拉伸(stretch)输入组

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;
}

fiddle :https://jsfiddle.net/37o25zay/

Answer 1

使用 boostrap 类 flex-grow-1 允许元素增长并填充剩余空间 ( https://getbootstrap.com/docs/4.2/utilities/flex/#grow-and-shrink )

body {
  padding: 2em;
}

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

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="cont">
  <div class="input-group">
    <div class="input-group-prepend flex-grow-1"> <!-- here -->
      <span class="input-group-text">foo</span>
      <span class="input-group-text">bar</span>
      <span class="input-group-text flex-grow-1">This should stretch.</span> <!-- here -->
    </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>