bootstrap col-auto 占用过多 space

Question

我无法理解为什么 col-auto 占用的 space 多于其内容所需的最低限度。

查看此示例 http://jsfiddle.net/ugt0x5nf/6/。请注意，呈现的 window 必须加宽到 > 768px 才能看到问题。

查看带有 col-md-auto 的最后一列如何占用比容纳 <button> 所需的更多 space。请参阅此屏幕截图。

为什么？我想要发生的是最后一列正好是按钮的宽度，其他列的其余部分扩展以补偿。

我的代码是这样的：

<form>
  <div class="form-row d-flex">
    <div class="col-md-1">
      <input class="form-control">
    </div>
    <div class="col-md-2">
      <input class="form-control">
    </div>
    <div class="col-md-4">
      <input class="form-control">
    </div>
    <div class="col-md-4">
      <input class="form-control">
    </div>
    <div class="col-md-auto">
      <button type="button" class="btn btn-link">X</button>
    </div>
  </div>
</form>

Answer 1

考虑：

<form>
  <div class="form-row d-flex">
    <div class="col-md-1">
      <input class="form-control">
    </div>
    <div class="col-md-2">
      <input class="form-control">
    </div>
    <div class="col w-100">
      <input class="form-control">
    </div>
    <div class="col w-100">
      <input class="form-control">
    </div>
    <div class="flex-shrink-1">
      <button type="button" class="btn btn-link">X</button>
    </div>
  </div>
</form>

有了这个，col-md-4 的两个列将拉伸，按钮列将缩小到按钮的宽度。

bootstrap col-auto 占用过多 space

boostrap col-auto taking up inordinate space

twitter-bootstrap

bootstrap-4