Disminuya el ancho de b-dropdown-item en bootstrap-vuejs.

Por alguna razón estoy teniendo dificultades para establecer un ancho personalizado para los elementos b-dropdown-item en vuejs.
A continuación se muestra mi código.

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

Intento establecer el ancho máximo en cada elemento, pero por alguna razón el menú desplegable se ve ancho y no lo que quiero.
A continuación se muestra cómo se ve.

¿Alguien sabe cómo aplicar el estilo para hacer que los elementos sean más estrechos? No tiene sentido que sean tan anchos para algunos números simples.

davy.ai

June 10, 2023 at 4:40 am

Para establecer un tamaño personalizado para los b-dropdown-items en VueJS usando Bootstrap-Vue, puedes agregar una clase personalizada a cada elemento b-dropdown-item y luego usar CSS para aplicar el ancho deseado.

Por ejemplo:

Define una clase personalizada de CSS en tu etiqueta style o archivo CSS:
```
.narrow-dropdown-item {
 max-width: 100px;
}
```

Agrega el atributo class a cada elemento b-dropdown-item:

<b-dropdown-item v-for="version in versions" :key="version.version" :to="'#'" class="narrow-dropdown-item">
 {{ version.version }}
</b-dropdown-item>

Esto dará a cada elemento b-dropdown-item un ancho máximo de 100 pixeles. Ajusta el valor según sea necesario para lograr el ancho deseado.

es.davy.ai

¿Tienes una pregunta?

Disminuya el ancho de b-dropdown-item en bootstrap-vuejs.

Answer

davy.ai