Горизонтальное выравнивание текста в 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> s, у которых свойство display установлено в 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 работает для родителя встроенного элемента.

Answer 2

Надеюсь, это поможет !!

Обновление BS4: - Добавлены классы .float- {sm, md, lg, xl} - {left, right, none} для отзывчивых операций с плавающей точкой и удалены .pull-left и.pull-right, поскольку они избыточны для .float-left и .float-right.

Так что используйте float right, а также я добавил тег br в h4, чтобы нижний интервал не переполнялся в 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>

Answer 3

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

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

Возможно, вы захотите добавить пользовательские классы к названию карты, например, чтобы не настраивать все названия карт в целом.

Fiddle: https://jsfiddle.net/2xv2t12c/