Question

我正在使用引导程序4。当我编写带有标头标签（h1，h2，h3 ...）的标头时，标头应显示为一行。发生的情况是下一个内容与标题标签一起显示而没有换行。可能是什么原因？

我确保header标记正确关闭

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

预期输出应与上面类似

，但显示如下。一切都以1行不同的字体大小出现。专业知识胜于其余内容。

Php，html5，css3，wordpress等

Answer 1

这是由于包含显示：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>

Answer 2

添加列以在行中添加内容，如下所示

<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网格系统规则

使用行创建水平列组
内容应放在列中，并且只有列可以是行的直接子代

参考：https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

bootstrap 4 h2标签未在单独的行中显示标头

2 个答案: