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

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/

标签： htmlcssbootstrap-4

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>