删除引导图标::之前

Question

我正在动态添加引导程序图标，我希望这些图标出现在新行中。然而结果是图标和文本出现在同一行。看图

这是生成的代码：

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

如何让图标/文本显示在单独的行上？这与自动生成的

::before

有关吗？如果是这样，我该如何抑制它？

Answer 1

只需将

row

div 的类

coll

更改为

#refine

，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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