Заголовок с флексбоксом - PullRequest
Новая
       10

Заголовок с флексбоксом

0 голосов
/ 08 ноября 2018

Я хочу, чтобы содержимое тега span было выровнено по правому краю, а тег заголовка выровнен по левому краю в той же строке. Но, похоже, не работает. 

<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>

enter image description here

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вы можете достичь этого, используя 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;
}

выход

enter image description here

0 голосов
/ 08 ноября 2018

Кажется, вы используете 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>
...