html - 如何在 span 标签中添加两个类?
问题描述
我正在使用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
但我看到了这个演示。
[ 3
文本颜色均为白色,背景颜色均为白色。没有什么是清楚的。
解决方案
将此用于多个类:
<option value="1" data-content="<span class='badge bg-danger'>Red</span>">
Red
</option>
您在这里没有使用引号:
class="badge bg-danger"
推荐阅读
- gpu - Nvidia Jetson TX2 与 Nvidia GTX 1060 TI
- c++ - 规范 C++ 枚举是默认可构造的?
- perl - 同时在 perl 脚本中运行多个作业
- listview - 刷新后 Xamarin 坏 ItemSource
- azure - 如何从 Azure Pipelines 下载构建工件?
- bash - 在终端和 bash 脚本中运行 docker exec 有什么区别
- ios - 如何在 Swift 4 和 Alamofire 中通过可编码解析 json 数据包括页码
- javascript - 如何在单击时同时更改图像和文本
- r - 在 read_excel R 中打开单元格范围
- linux - Asterisk 动态 Lua 拨号方案