动态添加Bootstrap图标后如何让图标与文本分两行显示？

首先明确：Bootstrap Icons 是通过 ::before 伪元素渲染图标内容的，这个伪元素默认是行内（inline）元素，所以会和相邻文本处于同一行——但你完全不需要抑制这个伪元素（抑制了图标就无法正常显示），只需要调整图标元素的布局属性就能实现分行。

下面是几种简单可行的解决方法：

方法1：用Bootstrap内置工具类（最便捷） #

Bootstrap自带d-block工具类，直接添加到图标标签上，就能让图标变成块级元素，独占一行：

<div class="row ml-1" id="refine">
  <i class='bi bi-trash d-block'></i> 
  "A1 - North Somerset core strategy"
  <br><br>
  <i class='bi bi-trash d-block'></i> 
  "Ashton Vale"
  <br><br>
  <i class='bi bi-trash d-block'></i> 
  "NPPF Sept 23"
  <br>
</div>

方法2：自定义CSS样式 #

如果不想用内置工具类，可以写个自定义样式，强制图标为块级显示：

.bi-trash {
  display: block;
}

添加这段CSS后，原有HTML代码无需额外修改，图标就会自动独占一行。

方法3：用容器包裹每个条目（更规范的布局） #

把每个图标+文本的组合放到独立的块级容器里，比如<div>或<p>，结构更清晰，也能自然实现分行：

<div class="row ml-1" id="refine">
  <div class="refine-item">
    <i class='bi bi-trash'></i>
    <span>"A1 - North Somerset core strategy"</span>
  </div>
  <div class="refine-item">
    <i class='bi bi-trash'></i>
    <span>"Ashton Vale"</span>
  </div>
  <div class="refine-item">
    <i class='bi bi-trash'></i>
    <span>"NPPF Sept 23"</span>
  </div>
</div>

之后给.refine-item i设置display: block;，或者给.refine-item添加flex-direction: column;的flex布局，都能让图标和文本上下排列。

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