Bootstrap 4水平文本对齐在<span>中不起作用

Question

我有以下代码：

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

但这不起作用，我得到了：

我也试过没有引导类。使用style="text-align: left"和style="text-align: right"。然而，这似乎也不起作用。

当我使用<div>时，水平对齐工作正常。我的问题只出现在显示属性设置为<span>和<div>的{​​{1}}和inline-block上。

Answer 1

您可以使用else，因为float-right是.card-title ...

display:block

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

使用<h4 class="card-title"> <span></span> <span class="float-right">Drago</span> </h4> 适用于内联元素的父级。

Answer 2

.card-title {
    display: flex;
    flex-wrap: wrap;
}

.text-right {
    margin-left: auto;
}

您可能希望将自定义类添加到卡片标题中，因此您通常不会调整所有卡片标题。

小提琴：https://jsfiddle.net/2xv2t12c/