загрузчик занимает полную ширину для выбора выпадающего

Question

<div align="center" class="form-group">

    <select v-model="subject" class="form-control">
      <option v-for="n in papertypes" class="">{{ n.type }}</option>

    </select>
    <br>

По умолчанию Bootstrap принимает полную ширину выпадающего списка. Я хочу, чтобы он был установлен, чтобы получить ширину, которая ему требуется. Как мне этого добиться?

Answer 1

Вы можете сделать это возможным, задав ширину для этого конкретного класса, например

<div align="center" class="form-group">
  <select v-model="subject" class="form-control">
    <option v-for="n in papertypes" class="">{{ n.type }}</option>
  </select>
</div>


.form-group select.form-control {
  display: inline-block;
  width: 300px;
}

Проверьте кодовый указатель ссылка

Также обратите внимание, что атрибут align устарелв HTML5.Так что если вы хотите выровнять контент по центру.Bootstrap имеет классы для этого.Как и text-center в Bootstrap3, у нас есть justify-content-center в Bootstrap4.

Answer 2

Добавьте класс w-auto к .form-control

<div align="center" class="form-group">
    <select v-model="subject" class="form-control w-auto">
      <option v-for="n in papertypes" class="">{{ n.type }}</option>
    </select>
    <br>

Answer 3

Вы можете добавить класс «выбор пользователя» для выбора.

<div align="center" class="form-group">

<select v-model="subject" class=""custom-select">
  <option v-for="n in papertypes" class="">{{ n.type }}</option>

</select>
<br>