代码之家 › 专栏 › 技术社区 › FanaticTyp

带flexbox的标题标签

flexbox twitter-bootstrap css

FanaticTyp · 技术社区 · 8 年前

我希望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>

2 回复 | 直到 8 年前

Hanif 8 年前

似乎你在使用引导程序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>

Inizio 8 年前

你可以通过使用 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,您可以使用默认的引导类

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

输出