Bagaimana untuk menyelaraskan imej menggunakan Bootstrap Vue

Question

Saya baru menggunakan Bootstrap Vue dan cuba menjajarkan imej ke kanan menggunakan pengepala kad b. Saya cuba menggunakan <span> atau <div>. Saiz tajuk templat adalah sempurna sehingga saya menambah imej, yang juga muncul sedikit ke kanan, tetapi juga sedikit di bawah. Inilah pautan codepen saya. Sebarang bantuan yang anda boleh berikan amatlah dihargai.

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>

Answer 1

Anda boleh menggunakan sistem grid 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"Lebar akan dilaraskan secara automatik.