html - Bootstrap CSS按钮问题,不改变颜色
问题描述
我有一个如下所示的引导按钮:
这个按钮的 HTML 代码是这样的:
<button type="button" class="btn-primary.custom-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
More Info
</button>
出于某种原因,我的 CSS 没有出现。我认为这是因为我的页面上有其他按钮并且它们的 CSS 冲突,所以我更改了类以将它们分开:
<button class="btn-filter active" onclick="filterSelection('all')"> Show all</button>
它只是bt
n,我将其更改为,btn-filter
以便我可以轻松分辨出我的 CSS 中的差异,但我仍然遇到自定义 btn 没有更改为正确颜色的问题。
这是我的CSS:
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 10px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide all elements by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn-filter {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn-filter:hover {
background-color: #ddd;
}
.btn-filter.active {
background-color: #666;
color: white;
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #E7E7E7;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
body {
padding-top: 75px;
}
.footer {
background-color: transparent;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: max-content;
display: inline-block !important;
}
.wrapper {
display: block;
}
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: -250px;
z-index: 99999;
background: #212529;
transition: all 0.3s;
padding: 1em;
}
#sidebar.active {
left: 0;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
opacity: 0;
transition: all 0.5s ease-in-out;
top: 0;
}
/* display .overlay when it has the .active class */
.overlay.active {
display: block;
opacity: 1;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
color: #dc880a;
}
#sidebar .sidebar-header {
padding: 20px;
background: #212529;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: #dc880a;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
.btn-primary.custom-btn {
background-color: #dc880a;
border-color: #dc880a;
}
* {
padding: 0;
margin: 0;
}
</style>
我不确定我在这里错过了什么......
解决方案
您需要调整按钮上的 css 类。具体来说,class="btn-primary.custom-btn"
需要更改为class="btn-primary custom-btn"
.
原因是 CSS 选择器的.btn-primary.custom-btn
意思是“具有 btn-primary 和 custom-btn 类的所有元素”,但实际应用于按钮的类是一个名为btn-primary.custom-btn
.
<button type="button" class="btn-primary custom-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
More Info
</button>
推荐阅读
- excel - 从 Word 到 Excel 的 VBA
- leaflet - 传单 l.layergroup 不显示第二层(功能)
- java - 带存款和取款的银行账户类
- postgresql - 创建历史触发器?
- php - PHP Laravel cURL SSL证书问题:无法获取本地颁发者证书
- cmake - 如何指示“find_package”查找安装在用户指定位置的包?
- python - Matplotlib & Tkinter:防止标题隐藏图形
- r - lapply over lapply(或其他清理时间序列数据的方式)
- sql - 根据条件在不同的列中选择
- vb.net - 我正在向 word 文档中添加文本并且需要包含下标