使用Bootstrap Vue實現影像右對齊的方法
P粉216807924
P粉216807924 2023-09-07 23:33:56
0
1
631

我是Bootstrap Vue的新手,嘗試使用b-card header將圖像對齊到右側。我試著使用<span>或<div>。模板的標題大小很完美,直到我添加了圖像,圖像也在右側顯示一點,但是在下面也有一點。這是我的codepen連結。如果你能提供任何幫助,將不勝感激。

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

全部回覆(1)
P粉786800174

您可以使用Bootstrap的grid系統:

<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"會自動調整寬度。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板