我正在使用bootstrap來組織我的內容,現在當我試圖創建一個& quot手風琴& quot我的引導程序干擾了我試圖在類中設置的CSS規則。當檢查chrome devtools時,我可以看到bootstrap添加了這個CSS規則;。崩潰:不是(。show) { display:無;}而我不知道為什么?
這讓我整個手風琴的事情變得一團糟,因為它顯示:沒有;。我發現如果我在devtools中禁用CSS規則或者將它添加到我的CSS中;。崩潰:不是(。顯示){ display: flex!重要;}一切正常。
我想要一些解釋,為什么這個css規則在那里,我如何刪除它,這樣我就不需要在我的css中有不必要的代碼。我將在下面包括受影響的html、css和JQuery。
<section class="collapse">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
</section>
.collapse {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
min-height: 50vh;
width: 90vw;
transition: all 200ms ease-in-out 50ms;
opacity: 0;
}
.collapse .items {
margin-left: 5px;
margin-right: 5px;
border-radius: 3px;
background: rgba(2, 220, 21, 0.5);
transition: all 200ms ease-in-out 50ms;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: 500;
cursor: pointer;
font-size: 16pt;
}
.collapse .default {
height: 50vh;
width: 10vw;
color: rgba(200, 255, 200, 0);
font-size: 16pt;
overflow: hidden;
}
.collapse .expand {
height: 50vh;
width: 100vw;
background: #7ab7ff;
color: cyan;
padding: 20px;
}
$(function() {
window.setTimeout(function() {
$(".collapse").css("opacity", "1");
}, 2000);
$(".items").addClass("default");
$(".items").on("click", function() {
var e = $(".collapse > .items");
if (e.hasClass("expand")) {
e.removeClass("expand");
$(this).addClass("expand");
} else {
$(this).addClass("expand");
}
});