如何删除选择元素中的自动调整大小答案

【问题标题】：How do I remove auto-resizing in the select element如何删除选择元素中的自动调整大小
【发布时间】：2017-11-27 08:16:23
【问题描述】：

我想做与 OP 在this post 中想要做的相反的事情

出于某种原因，我的选择会自动调整大小（可能是通过使用引导程序，我必须使用它）。我只想调整默认大小。

我有两个内联选择元素，它们会根据所选选项的长度不断调整大小。我想将它们的行为更改为默认值，例如 fiddle。它取最长的字符串“United States of America”，并根据它设置元素的宽度。

HTML

<div class="flex-top-down">
  <span class="input-header">Doc Type</span>
  <v-select v-model="docTypeSelect.value"
    class="dropdown-default"
    :options="docTypeSelect.options"
    options-value="val"
    placeholder="Please Select"
    search justified required
    close-on-select
  ></v-select>
</div>

<div class="flex-top-down">
  <span class="input-header">Major/Minor</span>
  <v-select v-model="majorMinorSelect.value"
    class="dropdown-default"
    :options="majorMinorSelect.options"
    options-value="val"
    placeholder="Please Select"
    search justified required
    close-on-select
  ></v-select>
</div>

我在这里使用VueStrap 来使用 vue.js 的引导程序

CSS：

 .flex-top-down {
    display: flex;
    flex-direction: column;
  }

  .input-header {
    font-weight: bold;
    margin-left: 10px;
  }

  .dropdown-default {
    margin-top: 6px;
  }

【问题讨论】：

标签： html css twitter-bootstrap vue-strap

【解决方案1】：

如果您想使用bootstrap selectpicker，那么它真的很容易。

这里是例子。

https://silviomoreto.github.io/bootstrap-select/examples/#width

【讨论】：