0
私は現在、Boostrap Panelクラスを使いこなしており、ロードブロッキングを起こしています。パネルを開くためにクリックすると、パネルの下のコンテンツはプッシュダウンされず、パネルの上に重ねられます。私はパネル上でZ-インデックスを使用できるかもしれないと思ったが、それはうまくいかなかった。理想的には、パネルはコンテンツを押し下げるべきですが、コンテンツの上にオーバーレイすることも許容されます。ここでは、jsfiddleを使って試したコードをいくつか取り除いたが、それは私にフィット感を与えていた！もっと情報が必要な場合はお知らせください、ありがとう！ブートストラップパネルが開いたときにコンテンツをプッシュするのを拒否します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="assets/img/favicon.ico" />
<title>UNCVRD</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- Font awesome icons -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
<script src="https://use.typekit.net/wvu7wqs.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<!-- Ionicons -->
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- HTML5 shiv and REspond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<div class="lyrics-container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" id="lyric-toggle" href="#collapse1"><i class="icon ion-chevron-down"></i>LYRICS</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Don't tell me this is over
<br> I'll carry you on my shoulder
<br> I'm marching on like a soldier
<br> Turn up the heat
<br> I get colder
<br> You see the trash as a treasure
<br> I'm getting closer than ever
<br> But there it blow,
<br> I got stronger
<br> Just need a little bit longer
<br> I'm the one but a sinner
<br> I'm finding to see it clearer
<br> So let me show you the winner
<br> That's how I pray for forgiveness
<br> No I ain't drowning, I'm boiling
<br> I'll left this world up alone
<br> I'll never be a quitter
<br> Even if it would kill me
</div>
</div>
</div>
</div>
</div>
</div>
<div class="comments-section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus repellendus, eos vitae perspiciatis maxime cupiditate a dicta numquam quibusdam saepe, ullam fugit fugiat atque. Fugiat quam voluptatibus mollitia, cupiditate in.
</div>
<!-- Bootstrap Core Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</html>
CSS（一番下の画像）：
.panel {
border-radius: 0 !important;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
height: 45px;
}
.panel-default > .panel-heading {
color: black;
background-color: white;
border-radius: 0;
height: 45px;
padding: 0;
}
.panel-title {
font-size: 18px;
vertical-align: middle;
line-height: 45px;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
}
.panel-title a {
text-decoration: none;
}
.panel-title .ion-chevron-down {
padding: 0 16px 0 16px;
}
.panel-title .ion-chevron-up {
padding: 0 16px 0 16px;
}
.panel-body{
background-color: white;
font-size: 14px;
margin-bottom: 66px;
}
ドロップダウン 
私は新しいページにジャンプしたくない、私は私がしたい（歌詞と呼ばれる）のページをドロップダウンメニューを途中でダウンしていドロップダウンして歌詞を明らかにする。現在、ドロップダウンの下にテキストを置くと、ドロップダウンの上にテキストが表示され、ドロップダウン内のテキストと干渉します。このページをモバイルとして開きます：http://genius.com/Rae-sremmurd-black-beatles-lyrics同様のドロップダウン機能を備えた「Ask Questions」セクションまでスクロールダウンします。私が達成したいことは理にかなっていますか？私は上記のほとんどのコードを取り除きました。 –