Применение сетки Bootstrap для встроенных элементов

Question

У меня есть тег заголовка со второстепенным подзаголовком, например:

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Есть ли способ применить систему сетки Bootstrap с интервалами столбцов для этих встроенных элементов, так что для маленьких экранов субтитры находятся в другой строке?

I could only think to split the h1 into two columns and apply column classes to control the layout:

<div class="row">
  <div class="col-xs-12 col-md-4 col-lg-4">
    <h1>Fancy display heading</h1>
   </div>
  <div class="col-xs-12 col-md-8 col-lg-8">
    <h1><small class="text-muted">With faded secondary text</small></h1>
  </div>
</div>

Но теперь есть два тега заголовка и слишком много отрицательного пространства между ними.

Answer 1

Самое простое решение Bootstrap - забыть даже об использовании для этого столбцов. Используя утилиты отображения Bootstrap 4, установите для маленького элемента отображение блока по умолчанию, а для больших, чем маленькие экраны, отображение встроенного типа, например:

<h3>
  Fancy display heading
  <small class="d-block d-md-inline text-muted">With faded secondary text</small>
</h3>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<h3>
  Fancy display heading
  <small class="d-block d-md-inline text-muted">With faded secondary text</small>
</h3>

Answer 2

Вы можете указать это с помощью утилит Bootstrap CSS с точками останова. Допустим, вам нужно другое поведение на экранах среднего размера и выше. Чтобы уточнить, вам нужно следующее поведение:

Средний и выше:

• Два заголовка должны отображаться на одной линии друг с другом

Меньше среднего:

• Два заголовка должны располагаться один поверх другого

Вот как будет выглядеть код:

<h1 class="d-md-inline-block">Fancy display heading</h1>
<h2 class="d-md-inline-block text-muted">With faded secondary text</h2>

Служебный класс здесь означает, что элементы будут отображаться inline-block для средних размеров экрана и выше.

Answer 3

Вы можете удалить h1 и добавить необходимые css правила, потому что браузер делает запас для h1 по умолчанию

HTML:

<div class="row">
  <div class="col-xs-12 col-md-4 col-lg-4 headingTest">
       Fancy display heading
   </div>
  <div class="col-xs-12 col-md-8 col-lg-8 headingTest">
    <small class="text-muted">With faded secondary text</small>
  </div>
</div>

CSS:

.headingTest {
  font-size: 32px;
}