Bootstrap icon remove::before

t2a7ltrp  于 12个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(148)

我添加引导图标动态,我希望这些出现在新的行。然而,结果是,图标和文本出现在同一行。见图片
x1c 0d1x的数据
这是生成的代码:

<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有关?如果是,我怎么抑制它?

p3rjfoxz

p3rjfoxz1#

只需将#refine div的类row更改为col,如下所示:

<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="col 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>

字符串
而::before不是DOM的一部分,它只是浏览器中伪元素的一个标记。

相关问题