Тег bootstrap 4 h2 не отображает заголовок в отдельной строке

Я использую bootstrap 4. Когда я пишу заголовок с тегами заголовка (h1, h2, h3...), заголовок должен отображаться в одной строке. что происходит, следующее содержимое отображается с тегом заголовка без разрыва строки. Что может быть причиной?

Я должен убедиться, что тег заголовка закрыт правильно

<div class = "row">    <h2>Expertise</h2>    <p>Php, html5, css3, wordpress, </p>    </div>

ожидаемый результат должен быть таким, как указано выше

но он отображается, как показано ниже. все идет в 1 строку с разным размером шрифта. опыт больше, чем остальное содержание.

Знание Php, html5, css3, wordpress,

добавьте сюда свой код

— 10.04.2019 13:56

<div class = "row"> <h2 >Опыт</h2> <p>Php, html5, css3, wordpress,</p> </div>

— 10.04.2019 14:02

Поместите свой код прямо в containerили добавьте столбцы в строку. В Bootstrap строки — это горизонтальные группы столбцов.

— 10.04.2019 14:26

css bootstrap-4

10.04.2019 13:52

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

939

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это связано с классом row, который содержит display:flex. Если вы хотите использовать строку, примените css «flex-direction»: столбец. Это перенесет h2 на следующую строку.

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<body>
  <div class = "">
    <h2>Expertise</h2>
    <p>Php, html5, css3, wordpress, </p>
  </div>
</body>

10.04.2019 14:23

Ответ принят как подходящий

Добавьте столбцы для добавления содержимого в строку следующим образом.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

<div class = "container">
    <div class = "row">
        <div class = "col">
            <h2>Expertise</h2>
            <p>Php, html5, css3, wordpress, </p>
        </div>
    </div>
</div>

Правила системы Bootstrap 4 Grid

Используйте строки для создания горизонтальных групп столбцов
Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.

Ссылка: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

10.04.2019 14:30