Начальная линия начальной загрузки выравнивает тег заголовка в столбце - PullRequest
Новая
       23

Начальная линия начальной загрузки выравнивает тег заголовка в столбце

2 голосов
/ 05 октября 2019

У меня есть следующий код начальной загрузки: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<div class="row">
  <div class="col-sm-1" style="background: red;">
    1
  </div>
  <div class="col-sm-11 align-baseline" style="background: blue; padding-left: 0;">
    <h6 style="background: green;">some title:</h6>
  </div>
</div>

Я хочу, чтобы нижняя часть зеленого тега h6 находилась внизу синего тега div с 11 столбцами

Возможно ли это? т. е. зеленая метка h6 должна быть выровнена с базовой линией синего элемента из 11 столбцов.

1 Ответ

1 голос
/ 05 октября 2019

Вам необходимо удалить нижнее поле по умолчанию h6 и заменить его на верхнее поле: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-sm-1" style="background: red;">
      1
    </div>
    <div class="col-sm-11 " style="background: blue; padding-left: 0;">
      <h6 style="background: green;" class="mb-0 mt-2">some title:</h6>
    </div>
  </div>
</div>

Или выровняйте его с помощью flexbox и auto-margin-top auto (все еще необходимо удалить нижнее поле) 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-sm-1" style="background: red;">
      1
    </div>
    <div class="col-sm-11 d-flex" style="background: blue; padding-left: 0;">
      <h6 style="background: green;" class="mb-0 mt-auto w-100">some title:</h6>
    </div>
  </div>
</div>
...