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>

的

inline-block

和

inline-flex

时遇到此问题。

Answer 1

您会使用

float-right

，因为

.card-title

是

display:block

...

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

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

使用

text-right

适用于内联元素的父元素。

更新：如果您尝试在 Bootstrap 5 中实现此目的，则该类将重命名为

float-end

：https://getbootstrap.com/docs/5.0/utilities/float/

Answer 2

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

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

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

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

Answer 3

希望这有帮助！

BS4 更新：- 为响应式浮动添加了 .float-{sm,md,lg,xl}-{left,right,none} 类，并删除了 .pull-left 和 .pull-right 因为它们对 .float 来说是多余的-向左和.float-right。

所以使用 float right 并且我在 h4 下添加了一个 br 标签，这样下面的跨度就不会溢出到 h4 中。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="card-block">
    <h4 class="card-title ">
      <span class="float-left">🐯</span>
      <span class="float-right">Drago</span>
    </h4>
    <br/>
    <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>