减少b-下拉项引导-vuejs的宽度

Question

由于某些原因，我很难为b-dropdown-item-s设置一个自定义宽度大小( vuejs )。下面是我的密码。

<b-dropdown split split-variant="secondary-light" variant="secondary-light" :text="maxVersion.toString()" lazy
    :split-to="'/test'" @toggle="loadVersions">
    <b-dropdown-item v-if="loading" class="text-center" href="#">
        <b-icon icon="three-dots" animation="cylon" font-scale="2" />
    </b-dropdown-item>
    <template v-else>
        <b-dropdown-item v-for="version in versions" :key="version.version" :to="'#'">
            {{ version.version }}
        </b-dropdown-item>
    </template>
</b-dropdown>

我试图设置每个元素的最大宽度，但由于某种原因，下拉列表看起来很宽，而不是我缩进的内容。

下面是它的样子。

​

​

有谁知道如何运用这种风格使项目更窄，因为它是没有意义的是，那么广泛的一些简单的数字？

Answer 1

如果您准确地查找.dropdown-menu CSS类。您将在该类中看到这一行CSS：

min-width: 10rem;

这一行防止ul标记减少。为了显示解决方案，我提供了一个示例和快速代码片段。

​

new Vue({
  el: '#app',
})

.dropdown-menu {
    min-width: 1rem !important;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">

  <b-dropdown text="All">
    <b-dropdown-item value="1">1</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item value="2">2</b-dropdown-item>
    <b-dropdown-item value="3">3</b-dropdown-item>
  </b-dropdown>
</div>

​