gpt4 book ai didi

html - Bootstrap 4 水平文本对齐在 中不起作用

转载 作者:行者123 更新时间:2023-11-28 04:44:59 25 4
gpt4 key购买 nike

我有以下代码:

   <div class="card" >
<div class="card-block">
<h4 class="card-title">
<span class="text-left">🐯</span>
<span class="text-right">Drago</span>
</h4>
<span class="card-text">
Location: ???<br>
District: ???<br>
Last updated: Tue, May 8th 2018
</span><br><br>
<div class="card-buttons" class="text-center">
<a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a>
<a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a>
<a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a>
</div>
</div>
</div>

我正在尝试在 Bootstrap 4 中制作一张卡片。

我确实想要 <h4> 中的表情符号左对齐,其后的文本右对齐。我正在尝试这样做:

<h4 class="card-title">
<span class="text-left">🐯</span>
<span class="text-right">Drago</span>
</h4>

但这不起作用,我得到:

https://i.imgur.com/x5FOJuy.png

我也尝试在没有 Bootstrap 类的情况下进行。使用 style="text-align: left"style="text-align: right" .然而,这似乎也不起作用。

当我使用 <div> 时水平对齐工作正常。我只用 <span> 遇到这个问题和 <div>显示属性设置为 inline-block 的 s和 inline-flex .

最佳答案

你会使用 float-right 因为 .card-titledisplay:block...

<h4 class="card-title">
<span>🐯</span>
<span class="float-right">Drago</span>
</h4>

https://www.codeply.com/go/CMrl4JydKp

使用 text-right 作用于内联元素的父元素。

关于html - Bootstrap 4 水平文本对齐在 <span> 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50280712/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com