Выровняйте интервал и заголовок в заголовке карты

Question

Я бы хотел стилизовать Bootsrap 4's card-header, чтобы на одной и той же линии располагался заголовок и пролет.Заголовок должен состоять из заголовка <hX> для расширения card card-body и элемента <span>, который не может быть кликабелен и тянется вправо:

Как я могу сделать так, чтобы область «Сводная информация о теле» не отображалась в той же строке , что и «Заголовок для кликов»?

.card-header h3 {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />

<div class="card">
  <div class="card-header" id="headingOne">
    <div class="float-right card-summary">Non-clicable body summary</div>
    <a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
      <h3>
        Clicable header
      </h3>
    </a>
  </div>

  <div id="collapse" class="collapse" aria-labelledby="headingOne">
    <div class="card-body">
      <p>Some content</p>
    </div>
  </div>
</div>

Answer 1

сначала удалите float-right класс.

вы можете использовать d-flex justify-content-between класс в card-header div.

<div class="card-header d-flex justify-content-between"  id="headingOne">

, а также добавить align-self-center класс.<div class="card-summary align-self-center">Non-clicable body summary</div>

Рабочая демонстрация

Ссылка: Утилиты начальной загрузки

Answer 2

Это то, что вы ищете?

.card-header h3 {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />

<div class="card">
  <div class="align-items-center card-header d-flex justify-content-between" id="headingOne">
    <a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
      <h3>
        Clicable header
      </h3>
    </a>
    <div class="card-summary">Non-clicable body summary</div>
  </div>

  <div id="collapse" class="collapse" aria-labelledby="headingOne">
    <div class="card-body">
      <p>Some content</p>
    </div>
  </div>
</div>

Удалены числа с плавающей запятой и использованы стандартные служебные классы BS flexbox для секции.