使用Bootstrap Vue实现图像右对齐的方法-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

使用Bootstrap Vue实现图像右对齐的方法

P粉216807924 2023-09-07 23:33:56

[Vue.js讨论组]

865

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

全部回复(1)

P粉7868001742023-09-08 19:30:00 1楼

您可以使用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"会自动调整宽度。