В Bootstrap 5 можно использовать классы "form-control" и "col-auto" для создания input, который будет подстраиваться под размер текста.
Прежде всего, необходимо включить Bootstrap в свой проект. Вы можете использовать локальные или удаленные файлы CSS и JS или установить их через пакетный менеджер, такой как npm или yarn.
После подключения Bootstrap, вы можете использовать классы "form-control" и "col-auto" для создания input с автошириной. Например:
<div class="container">
<div class="row">
<div class="col">
<input type="text" class="form-control" value="Фамилия Имя Длинное Отчество" readonly>
</div>
</div>
</div>
В этом примере, мы создаем контейнер с классом "container", внутри которого размещаем строку с классом "row". Внутри строки создаем колонку с классом "col", а внутри колонки размещаем наш input.
Класс "form-control" задает стандартные стили Bootstrap для текстовых полей, включая автоширину и округлые углы. Класс "col-auto" автоматически подстраивает ширину колонки под содержимое внутри нее.
Помимо этого, мы также добавили атрибут "readonly" к нашему input, чтобы предотвратить редактирование значения.
Это простой и эффективный способ создания input, который будет подстраиваться под размер текста внутри него.