Question

我希望span标签的内容右对齐，而header标签的左对齐在同一行。但似乎不起作用。

<div class="ibox-body mb-5">
      <h6 class="mt-5 mb-2 d-flex align-items-start">Users</h6>
      <span class="d-flex align-items-end">10</span>
 </div>

Answer 1

似乎您使用的是Bootstrap 4，如果是，则只需在容器元素中添加类d-flex justify-content-between：

<div class="ibox-body d-flex justify-content-between mb-5">
  <h6 class="mt-5 mb-2 d-flex align-items-start">Users</h6>
  <span class="d-flex align-items-end">10</span>
</div>

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="ibox-body d-flex justify-content-between mb-5">
      <h6 class="mt-5 mb-2 d-flex align-items-start">Users</h6>
      <span class="d-flex align-items-end">10</span>
 </div>
</body>
</html>

Answer 2

您可以使用flex类

来实现

HTML

<div class="container">
    <div class="d-flex justify-content-between bd-highlight mb-3 pr-2 align-items-center">
        <div class="p-2 bd-highlight">Users</div>
        <button type="button" class="btn btn-default btn-circle">4</button>
    </div>
</div>

对于圆形背景，我使用了自定义CSS，可以使用默认的引导程序类

CSS

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

输出

带有Flexbox的标题标签

2 个答案: