在卡头中对齐跨度和标题

Question

我想为Bootsrap 4的card-header设置样式，以使标题和跨度在同一行上垂直对齐。标头应包含用于扩展<hX>的{​​{1}}的{​​{1}}标题和不可剪切并向右拉的card：

如何确保“非可正文摘要”跨度与“可标头”出现在同一行上？

card-body

<span>

Answer 1

这是您要找的吗？

.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实用程序类   部分。

Answer 2

first remove float-right class.

you can use the d-flex justify-content-between class in card-header div.

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

and also add align-self-center class. <div class="card-summary align-self-center">Non-clicable body summary</div>

Working Demo

Ref : Bootstrap utilities