为什么input元素在bootstrap col-auto列中的呈现方式不同于span元素？

Question

为什么input元素在bootstrap col-auto列中的呈现方式不同于span元素？类form-control的input元素在col-auto列中比具有相同样式的span元素呈现得更宽。

我想使用bootstrap呈现一个span元素和一个只读输入元素一样。

span.input-readonly-like {
    background-color: #e9ecef;
    padding:6px 12px;
    display:block;
    border-radius:.25rem;
    border:1px solid #ced4da;    
    width:100%;
    line-height: 1.5;
}

<div class="container mt-3">
  <div class="row">

    <div class="form-group col-auto">
      <label>LOC - SPAN</label>
      <span class="form-control input-readonly-like">MM68A0</span>
    </div>

  <div class="form-group col-auto">
    <label>LOC - INPUT</label>
    <input type="text" class="form-control" readonly value="MM68A0">
  </div>

  </div>
</div>

Answer 1

你看到的是预期的行为。从文档中：

使用col-{breakpoint}-自动类根据内容的自然宽度调整列的大小。

那么对.col-auto有什么特别的需求吗？使用.col，您将实现您想要的：两个大小相等的.form-group。它们将适合父.row容器的整个宽度：

<div class="form-group col">
  <label>LOC - SPAN</label>
  <span class="form-control input-readonly-like">MM68A0</span>
</div>

<div class="form-group col">
  <label>LOC - INPUT</label>
  <input type="text" class="form-control" readonly value="MM68A0">
</div>