Question

我目前正在搞乱Boostrap Panel类，并遇到了障碍。当我单击打开面板时，面板下方的内容不会被按下，而是面板顶部的图层。我以为我可以在面板上使用z-index，但这不起作用。理想情况下，面板应该将内容向下推，但是在内容之上覆盖也是可以接受的。这里有一些剥离的代码，尝试使用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;
}

点击下拉列表

点击下拉列表后

Answer 1

你需要这个吗？

.panel {
    border-radius: 0 !important;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.panel {
    border-radius: 0 !important;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.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;
}

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 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>

Answer 2

我不完全确定你要求的是什么，但是我会建议将它发送到另一个页面，即简单的转到页面

    <li>
    <a href="testemonials.html">Testemonials</a>
    </li>

如果您将其添加到导航栏，则单击它将重定向。但是，如果您希望它实际上只是下拉列表，则必须在bootstrap css上下载一个副本，并将小屏幕大小的@media宽度更改为更长的一个并消除冲突的媒体宽度。这应该意味着它将以任何宽度粘在那上面。我希望这有帮助。要查看我的意思是将窗口宽度减小到非常小，它将达到导航栏方法应该更改的断点。

Answer 3

尝试class="dropdown-toggle" data-toggle="dropdown"代替data-toggle="collapse"，可能会有效

Answer 4

＆＃13;

.panel {
    border-radius: 0 !important;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

＆＃13;

删除高度：45％的类penel

Bootstrap Panel拒绝在打开时推送内容

4 个答案: