为什么我的HTML代码中4行文本显示为单行而非4个独立行？

现有代码的问题 #

语法错误 #

浏览器无法正确解析你写的DOM结构，错误点如下：

• 多处class属性名拼写错误，误写为clas
• 多处class属性引号不配对，例如class=col"缺失左侧引号
• 标签结构不完整：第三个div缺失开头的<，多个div标签末尾缺失闭合尖括号>，导致节点层级完全混乱

布局逻辑错误 #

你使用的是Bootstrap栅格系统，row默认是弹性布局，就算语法完全正确，默认的col也会横向排列，4个文本会并排展示在同一行，不会自动换行。

修复方案 #

方案1：保留Bootstrap栅格写法 #

给每个列加上col-12类，让每列占满整行宽度，自然换行：

<div class="row">
    <div class="col-12">
        <p>Hello</p>
    </div>
    <div class="col-12">
        <p>Hello</p>
    </div>
    <div class="col-12">
        <p>Hello</p>
    </div>
    <div class="col-12">
        <p>Hello</p>
    </div>
</div>

方案2：简化写法 #

p标签本身是块级元素，默认独占一行，不需要栅格包裹可以直接写：

<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

内容的提问来源于stack exchange，提问作者user17171254