bootstrap4栅格布局遇坑总结

Posted 2021-11-11 Rose✿留白ق೨

bootstrap4栅格布局自动去除了br换行、hr水平分隔线和div等块级元素的独占一行效果


下面这段代码，一般在浏览器上的显示效果如图1所示：

<span>admin回复了你的文章editormd编辑器的使用</span>
<br>
<span>2021-10-21</span>
<hr>
<span>admin回复了你的文章editormd编辑器的使用</span>
<br>
<span>2021-10-21</span>
<hr>
<span>admin回复了你的文章editormd编辑器的使用</span>
<br>
<span>2021-10-21</span>
<hr>

图1：

而在使用了bootstrap4的栅格系统之后，效果变成图2所示：

<div class="container">
        <div class="row">
          <span>admin回复了你的文章editormd编辑器的使用</span>
          <br>
          <span>2021-10-21</span>
          <hr>
          <span>admin回复了你的文章editormd编辑器的使用</span>
          <br>
          <span>2021-10-21</span>
          <hr>
          <span>admin回复了你的文章editormd编辑器的使用</span>
          <br>
          <span>2021-10-21</span>
          <hr>
        </div>
</div>

图2：

从图2中可以发现，br标签的换行效果和hr标签的水平分隔线效果都失效了。