在按钮上覆盖 bootstrap active/visited class
override bootstrap active/visited class on button
我正在尝试在 bootstrap 4 手风琴上设置卡片 header 的样式,但我似乎无法覆盖预设 class 样式。
我想更改 .btn-link
使其在活动或访问时不带下划线,但 .btn-link:active
和 .btn-link:visited
似乎没有改变输出中的任何内容,并且我不知道为什么。
是不是因为我需要自己改bootstrap css代码?我在 CodePen 中执行此操作,因此我无法从那里访问它。
如果以前有人遇到过这个问题,我很高兴收到你的来信!
这里是link到CodePen中的笔:https://codepen.io/jreecebowman/full/dmpLRp/(手风琴在'products'部分。
否则,代码如下。
提前致谢!
html 手风琴中的第一张牌:
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion1">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica...
</div>
</div>
对应css:
#products {
padding-top:100px;
min-height:100%;
position:relative;
background-color:whitesmoke;
#accordion1, #accordion2 {
box-shadow:0px 0px 5px 0px lightgray;
#headingOne {
.btn-link {
color:navy;
opacity:0.8;
}
.btn-link:hover {
opacity:1.0;
text-decoration:none;
}
.btn-link:active {
text-decoration:none;
}
.btn-link:visited {
text-decoration:none !important;
}
}
}
}
最简单和最快的解决方案就是这个。
.btn-link:hover { text-decoration: none !important; }
我不认为覆盖 Bootstrap classes 是一个好习惯,所以最好的办法是创建一个新的 class 并使用相同的代码。
不只是:hover和:active,还得加:focus
.btn-link:focus { text-decoration: none; }
试试这个:
#products {
padding-top:100px;
min-height:100%;
position:relative;
background-color:whitesmoke;
#accordion1, #accordion2 {
box-shadow:0px 0px 5px 0px lightgray;
#headingOne {
.btn-link {
color:navy;
opacity:0.8;
}
.btn-link:hover {
opacity:1.0;
text-decoration:none;
}
.btn-link:active {
text-decoration:none;
}
.btn-link:focus {
text-decoration:none;
}
.btn-link:visited {
text-decoration:none !important;
}
}
}
我正在尝试在 bootstrap 4 手风琴上设置卡片 header 的样式,但我似乎无法覆盖预设 class 样式。
我想更改 .btn-link
使其在活动或访问时不带下划线,但 .btn-link:active
和 .btn-link:visited
似乎没有改变输出中的任何内容,并且我不知道为什么。
是不是因为我需要自己改bootstrap css代码?我在 CodePen 中执行此操作,因此我无法从那里访问它。
如果以前有人遇到过这个问题,我很高兴收到你的来信!
这里是link到CodePen中的笔:https://codepen.io/jreecebowman/full/dmpLRp/(手风琴在'products'部分。
否则,代码如下。
提前致谢!
html 手风琴中的第一张牌:
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion1">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica...
</div>
</div>
对应css:
#products {
padding-top:100px;
min-height:100%;
position:relative;
background-color:whitesmoke;
#accordion1, #accordion2 {
box-shadow:0px 0px 5px 0px lightgray;
#headingOne {
.btn-link {
color:navy;
opacity:0.8;
}
.btn-link:hover {
opacity:1.0;
text-decoration:none;
}
.btn-link:active {
text-decoration:none;
}
.btn-link:visited {
text-decoration:none !important;
}
}
}
}
最简单和最快的解决方案就是这个。
.btn-link:hover { text-decoration: none !important; }
我不认为覆盖 Bootstrap classes 是一个好习惯,所以最好的办法是创建一个新的 class 并使用相同的代码。
不只是:hover和:active,还得加:focus
.btn-link:focus { text-decoration: none; }
试试这个:
#products {
padding-top:100px;
min-height:100%;
position:relative;
background-color:whitesmoke;
#accordion1, #accordion2 {
box-shadow:0px 0px 5px 0px lightgray;
#headingOne {
.btn-link {
color:navy;
opacity:0.8;
}
.btn-link:hover {
opacity:1.0;
text-decoration:none;
}
.btn-link:active {
text-decoration:none;
}
.btn-link:focus {
text-decoration:none;
}
.btn-link:visited {
text-decoration:none !important;
}
}
}