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

Question

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

由于某种原因，我的选择会自动调整大小(可能是通过使用我必须使用的 Bootstrap )。我只想进行默认大小调整。

我有两个内联选择元素，它们会根据所选选项的长度不断调整大小。我想将他们的行为更改为默认值，如 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这里使用 bootstrap 和 vue.js

CSS:

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

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

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

Answer 1

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

这里是例子。

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