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

带flexbox的标题标签

flexbox twitter-bootstrap css

FanaticTyp · 技术社区 · 7 年前

我希望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 回复 | 直到 7 年前

Hanif 7 年前

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

你可以通过使用 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;
}

输出

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前