Как контролировать ширину брата в Bootstrap 4?

Question

У меня есть два элемента <p> под элементом <h1>, и я хочу, чтобы ширина отображаемых абзацев никогда не превышала 90% ширины содержимого в заголовке.Содержимое элементов <p> и <h1> генерируется динамически на стороне сервера с Django и может также переноситься на меньшие размеры экрана.

Я пробовал d-flex, flex-column, flex-shrink с незначительной удачей.Лучшее, что я смог сделать, - это динамическое и гибкое изменение размера <p> s, но я потерял способность центрировать 3 элемента по горизонтали в родительском контейнере div.

<div class="container">
  <div class="text-center">
    <h1 class="display-4">A Short Big Title!</h1>
    <p class="lead">This is a pretty long sentence, and it could be longer than the title above, however, I would not like its width to exceed 90% of that h1 tag above.</p>
    <p><i>This is a shorter sentence, however, I still have the same hopes for its width.</i></p>
  </div>
</div>

Answer 1

Стратегия-1 (синяя) : Чтобы получить 90% абзацев под заголовком, мы сначала проверили ширину заголовка ... которая равна 100 ширины области просмотра; Это означает, что для получения ширины 90% нам нужно было бы поместить поле 5% (от ширины области просмотра) слева / справа;

Стратегия-2 (зеленая) : мы проверили визуализированную ширину <h1>, которая была 413px, затем мы получили наш абзац равным 413px, мы поместили поля на auto, чтобы получить хороший централизованный текст;

оба решения реализованы в следующем фрагменте ниже:

.divStrategy1 p {
  margin: 0 5vw;
  color: blue;
}

.divStrategy2 p {
  width: 413px;
  margin: auto;
  color: green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="text-center divStrategy1">
  <h1 class="display-4">A Short Big Title!</h1>

  <p class="lead">This is a pretty long sentence, and it could be longer than the title above, however, I would not like its width to exceed 90% of that h1 tag above.</p>

  <p><i>This is a shorter sentence, however, I still have the same hopes for its width.</i></p>
</div>

<div class="text-center divStrategy2">
  <h1 class="display-4">A Short Big Title!</h1>

  <p class="lead">This is a pretty long sentence, and it could be longer than the title above, however, I would not like its width to exceed 90% of that h1 tag above.</p>

  <p><i>This is a shorter sentence, however, I still have the same hopes for its width.</i></p>
</div>