如何在 span 标签中添加两个类？答案

【问题标题】：How to add two class in span tag?如何在 span 标签中添加两个类？
【发布时间】：2021-11-29 20:00:30
【问题描述】：

我正在使用bootstrap 5 和bootstrap-select 。

我有一个这样的 PSD

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div class="col-md-6 mx-auto">
        <label for="color_id">Colors</label>
        <select class="form-control selectpicker" id="color_id" name="color_id[]" data-live-search="true">
            <option value="1" data-content="<span class=badge bg-danger>Red</span>">
                Red
            </option>
            <option value="2" data-content="<span class=badge bg-warning>Warning</span>">
                Warning
            </option>
        </select>
    </div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap-select.js"></script>
</body>
</html>

当我打开inspact 时，我看到了这段代码

我发现这些代码不见了

bg-danger

但我看到了这个演示。

文本颜色均为白色，背景颜色均为白色。什么都不清楚。

【问题讨论】：

在类名周围添加引号：class='badge bg-warning'
请勿发布代码、数据、错误消息等的图片 - 将文本复制或输入到问题中。 How to Ask
@rayhatfield - 谢谢

标签： html bootstrap-5

【解决方案1】：

将此用于多个类：

<option value="1" data-content="<span class='badge bg-danger'>Red</span>">
                Red
</option>

您没有在此处使用引号： class="badge bg-danger"

【讨论】：

这已经在一个双引号的属性值中，所以在这种情况下你应该在类名周围使用单引号，这样它就不会破坏属性。