如何拉伸无输入框的Bootstrap输入组？虽属组件误用但需实现

嘿，我懂你想要的效果——让中间那个写着"This should stretch."的input-group-text元素占满input-group的剩余空间，两边分别固定显示文本和按钮对吧？虽然这确实有点跳出Bootstrap Input Group的常规使用场景，但完全可以实现！

当前问题分析 #

你现在的代码里，input-group-prepend里的三个文本元素都是固定宽度，挤在左侧没法利用中间空白空间，右侧按钮组也保持固定宽度，导致整个布局没达到你想要的拉伸效果。

修复方案 #

我们可以通过调整Flex布局属性来实现需求，只需要给容器和目标元素添加几个Bootstrap内置类，再配合少量自定义样式即可：

修复后的HTML代码

<div class="cont">
  <div class="input-group">
    <!-- 给prepend容器添加flex-grow-1和d-flex，让它占据剩余空间并成为flex容器 -->
    <div class="input-group-prepend flex-grow-1 d-flex">
      <span class="input-group-text">foo</span>
      <span class="input-group-text">bar</span>
      <!-- 给需要拉伸的文本添加flex-grow-1，让它占满prepend内的剩余空间 -->
      <span class="input-group-text flex-grow-1">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>

对应的CSS样式

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

/* 可选：调整拉伸文本的对齐方式，让视觉效果更协调 */
.input-group-prepend .flex-grow-1 {
  text-align: left;
}

原理说明 #

1. flex-grow-1类会让元素在flex容器中占据所有可用剩余空间，把它加到input-group-prepend上，就能让它填满input-group里除右侧按钮组之外的所有空间。
2. 给input-group-prepend加上d-flex确保它是flex容器，这样里面的子元素可以使用flex布局属性。
3. 最后给需要拉伸的input-group-text也加上flex-grow-1，让它占满input-group-prepend里的剩余空间，实现你想要的拉伸效果。

这样调整后，中间的文本会自动拉伸适配容器宽度，左右两边的元素保持固定宽度，完美符合你的需求！

内容的提问来源于stack exchange，提问作者tom