Comment aligner à droite les images à l'aide de Bootstrap Vue
P粉216807924
P粉216807924 2023-09-07 23:33:56
0
1
606

Je suis nouveau sur Bootstrap Vue et j'essaie d'aligner une image vers la droite à l'aide de l'en-tête de la carte B. J'ai essayé d'utiliser <span> ou <div>. La taille du titre du modèle était parfaite jusqu'à ce que j'ajoute l'image, qui apparaissait également un peu à droite, mais aussi un peu en dessous. Voici mon lien codepen. Toute aide que vous pouvez fournir serait grandement appréciée.

https://codepen.io/tone373/pen/JjeYazG

<b-card header-tag="header">
  
  <template #header>
    <h4>b-img</h4>
    <b-img right src="https://picsum.photos/125/125/?image=58" alt="Right image"></b-img>
  </template>

</b-card>
P粉216807924
P粉216807924

répondre à tous(1)
P粉786800174

Vous pouvez utiliser le système grid de Bootstrap :

<b-card header-tag="header">
  <template #header>
    <b-row align-h="between" class="align-items-center">
      <h4 class="mb-0">b-img</h4>
      <b-col cols="auto">
        <b-img right src="https://picsum.photos/125/125/?image=58" alt="Right image"></b-img>
      </b-col>
    </b-row>
  </template>
</b-card>

b-row使用align-h="between"可以水平对齐元素,并在它们之间留有空间。 <h4>和图片被放置在第1列和第2列中,b-col中的cols="auto"La largeur sera ajustée automatiquement.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal