Question

编辑：我使用JSX，其中className = class。

我刚刚在我的React组件中添加了一些Boostrap，如下所示：

<div className="col-xs-2">
   <a onClick={this.deleteButtonClicked.bind(this, book)}><span className="glyphicon glyphicon-remove"></span></a>
</div>

但是glyphicon没有显示在页面上。我确信我已经正确地将Bootstrap包含在我的项目中，因为网格系统正常工作。

这是生成的HTML：

<a data-reactid=".0.1:$0.0.1.0"><span class="glyphicon glyphicon-remove" data-reactid=".0.1:$0.0.1.0.0"></span></a>

你知道问题是什么吗？

编辑2：这是生成的CSS

box-sizing: border-box
color: rgb(2, 117, 216)
display: inline
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
font-size: 16px
height: auto
line-height: 24px
width: auto

Answer 1

以下代码段使用您的代码和引导程序CSS并且正在运行。所以它必须是你的CSS链接或字体的可用性（URL在CSS中）。如果您在自己的服务器上使用CSS，仅仅在项目中包含CSS是不够的。字体也必须可用。

<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <a data-reactid=".0.1:$0.0.1.0"><span class="glyphicon glyphicon-remove" data-reactid=".0.1:$0.0.1.0.0"></span></a>
  </body>
</html>

Answer 2

代码工作只是确保你有自举CDN或你为它下载css

Bootstrap：为什么我的glyphicon不显示？

2 个答案: