Tengo algunas etiquetas que estoy mostrando en mi pantalla y el problema es que cuando cambio el tamaño de la pantalla, literalmente se desbordan del contenedor. Mi problema es que quiero que cambien de tamaño cuando la pantalla se hace más pequeña. Entonces, cuando la pantalla se vuelve más pequeña, también serían pequeños y permanecerían como estaban en la pantalla de mi computadora, pero en una versión más pequeña de sí mismos. Es principalmente CSS, pero no pude resolverlo (estoy usando Bootstrap 5 para esto). Aquí está el código para generarlos (los datos provienen de una API, estoy usando VueJS para esto)
<template>
<div class="d-flex col-12 flex-column bd-highlight mb-3">
<div class="p-2 d-flex bd-highlight col-12" v-for="(question,index) in questions" :key="question + index">
<div class="d-flex p-2 me-2" v-for="tag in question.tags" :key ="tag + index">
<span class="badge bg-dark text-white"><i :class="'devicon-'+tag.nom.toLowerCase()+'-plain'"></i> {{tag.nom}}</span>
</div>
</div>
</div>
</template>
Aquí está la representación que obtengo para una pantalla de computadora. Etiquetas en la computadora
Aquí está la representación que obtengo para un dispositivo más pequeño. Etiquetas en pantalla redimensionada
Este es un caso para flex-wrap. Desde MDN :
La propiedad CSS flex-wrap establece si los elementos flexibles se fuerzan en una línea o se pueden ajustar en varias líneas. Si se permite el ajuste, establece la dirección en la que se apilan las líneas.
Como está usando Bootstrap 5, puede usar la clase flex-wrap. Se puede encontrar más información en los documentos de Bootstrap 5 .
Aquí está el comportamiento que está encontrando, y lo mismo con flex-wrap:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-6 bg-secondary">
<h2>Default<h2>
<div class="p-2 d-flex bd-highlight col-12">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<div class="col-6 bg-primary">
<h2>With flex-wrap class<h2>
<div class="p-2 d-flex flex-wrap bd-highlight col-12">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras