почему элемент ввода отображается в столбце bootstrap col-auto иначе, чем элемент span?

Question

Почему элемент ввода отображается в столбце bootstrap col-auto иначе, чем элемент span? Элемент ввода с управлением формой класса визуализируется шире в столбце 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} -auto для определения размера столбцов на основе естественной ширины их содержимого.

То есть какой-то конкретный спрос на .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>