我正在使用React框架创建前端，并使用Bootstrap 5.3进行设计。
根据我的理解，Bootstrap现在作为标准已经取消了阴影效果。所以，如果按钮处于激活状态，按钮将不会显示阴影/边框，就像在Bootstrap v5.0文档中所示。
https://getbootstrap.com/docs/5.0/components/buttons/
不幸的是，我不知道如何直接在代码中自定义单个按钮。是否可以通过在按钮中添加style标签，或者在分组按钮中添加label标签来激活这种阴影效果？
1
916style={{*这里是一些CSS魔法*}}
这是一些示例代码，我想用这种我们从v5.0中了解到的阴影效果来自定义三个按钮。
<div className="row">
<h4>选择缓冲区</h4>
</div>
<div className="row">
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onClick={() => measurementConfig.buffer = 1 } />
<label className="btn btn-lg btn-warning" htmlFor="buffer1"><span className="bi-database-add"></span> 缓冲区 1</label>
</div>
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() => measurementConfig.buffer = 2 } />
<label className="btn btn-lg btn-success" htmlFor="buffer2"><span className="bi-database-add"></span> 缓冲区 2</label>
</div>
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() => measurementConfig.buffer = 3 } />
<label className="btn btn-lg btn-info" htmlFor="buffer3"><span className="bi-database-add"></span> 缓冲区 3</label>
</div>
</div>
提前感谢！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
使用这个css，它将会选择被选中的单选框输入的下一个相邻的标签。
input[type="radio"]:checked+label.btn { border: 1px solid #000; //在这里添加边框/阴影 }