如何让.row内无兄弟元素的元素及无圆形按钮的input-group占满宽度？

嘿，我来帮你搞定这两个Bootstrap布局的问题～

Bootstrap的.row本身是flex容器，它的直接子元素默认是flex项，要实现这个需求分两种情况：

• 如果子元素是Bootstrap列类（比如.col-6、.col-11这类）：
  固定数字的列类（比如.col-11）会强制占据固定比例宽度，哪怕没有兄弟元素也不会扩展。正确做法是用不带数字的.col类，它自带flex: 1 0 0%属性，会自动占据剩余空间——没有兄弟时就直接占满整个.row宽度。

• 如果子元素是自定义非列元素：
  给它添加Bootstrap的flex-grow-1类（或者自定义CSS flex-grow: 1），同时确保它没有固定宽度，就能在无兄弟时自动扩展占满容器。

看了你的代码，问题出在固定列宽的.col-11上——这个类会强制元素占据11/12的宽度，不管右边有没有按钮，它都不会自动扩展。你之前试flex-grow没生效，是因为.col-11的flex-basis是固定的calc(91.66666667%)，flex-grow无法覆盖这个固定基准宽度。

修改方案 #

把.col-11改成不带数字的.col类，让它自动占据.row的剩余空间：

<div class="jumbotron shadow py-2 px-3">
  <div class="row col-12 px-0 mb-2">
    <!-- 将.col-11替换为.col，实现自适应剩余空间 -->
    <div class="col">
      <div class="input-group input-group-sm">
        <div class="input-group-prepend">
          <span class="input-group-text form__prepend">
            <b>№1</b>
          </span>
        </div>
        <input type="text" class="form-control form-control-sm" placeholder="blah blah blah" />
      </div>
    </div>
    <div class="col-1 pr-0 d-flex justify-content-end form__delivery__delete">
      <button class="btn btn-primary btn_circle">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
</div>

原理说明 #

• .col类的核心CSS是flex: 1 0 0%，意味着它的基准宽度为0，会自动扩展占据所有可用空间：当右边的.col-1存在时，它会占满.row减去.col-1宽度后的剩余部分；当.col-1被移除后，它直接占满整个.row宽度。
• Bootstrap的input-group默认是width: 100%且display: flex，所以只要父元素（.col）占满宽度，它自然就会跟着占满容器。

如果需要保留原来的左右间距，给.col加个pr-2这类间距类就能和原来的布局保持一致啦～

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