bootstrap 为选择下拉选择全宽答案

【问题标题】：bootstrap take full width for select drop downbootstrap 为选择下拉选择全宽
【发布时间】：2018-04-25 05:15:08
【问题描述】：

<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 采用选择下拉菜单的全宽。我希望将其设置为获得所需的宽度。我如何做到这一点？

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

将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>

【讨论】：

【解决方案2】：

您可以为选择添加“自定义选择”类。

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

【讨论】：

【解决方案3】：

您可以通过为特定类指定宽度来实现它，例如

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


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

查看codepen 链接

另外请注意align 属性在 HTML5 中已弃用。因此，如果您想将内容对齐到中心。 Bootstrap 有这方面的课程。就像 Bootstrap3 中的 text-center 一样，我们在 Bootstrap4 中也有 justify-content-center。

【讨论】：