使用Bootstrap Vue实现图像右对齐的方法
P粉216807924
P粉216807924 2023-09-07 23:33:56
[Vue.js讨论组]

我是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"会自动调整宽度。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号