在桌面上完成下拉菜单后，我想看看它在移动设备上的效果如何。问题是在我的 ipad 上， Bootstrap 面板在屏幕上延伸，所以下拉菜单被面板切断了。我可以使用一些 <br> ，但我确定还有另一种方法。我可以停止面板拉伸(stretch)，或者使下拉菜单显示在面板顶部而不是面板下方吗？在我的桌面上，面板位于屏幕的左侧。我怎样才能让它保持这种状态？
我的 html:
<!DOCTYPE html>
<html>
<head>
<title>| Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.cs s"
integrity="sha384- 1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
</head>
<body>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">H</a></li><li>
<a href="#">A</a></li><li>
<a href="#">C</a></li><li>
<a href="#">Tr</a>
<ul>
<li><a href="#">Last 24 hours</a></li>
<li><a href="#">View All</a></li>
<li><a href="#">Deadliest</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="headerBreak">
</div>
<div class="recent">
<div class="container">
<div class="col-md-3">
<div class="panel panel-default">
<div class="headingPanel">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-heading">
<h3 class="panel-title"><center>Most Recent</center></h3>
</div>
</div>
<div class="panel-body">
<table class="table">
<tr>
<th>Date</th>
<th>Location</th>
<th>More Info</th>
</tr>
<tr>
<td>01/28/16</td>
<td>Missouri</td>
<td><a href="#">More Info</a></td>
</tr>
</table>
<center><input type="button" value="View all" onClick="#" class="btn btn-default"></center>
<center><input type="button" value="Last 24 hours" onClick="#" class="btn btn-default"></center>
<center><input type="button" value="Last 48 hours" onClick="#" class="btn btn-default"></center>
</div>
<div class="panelFooter">
<p>Last Updated: 01/28/16</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我的CSS:
@charset "utf-8";
body
{
padding: 0;
margin: 0;
overflow-y: scroll;
font-size: 14px;
}
/* Navigation */
#nav
{
background-color: #222;
}
#nav_wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li
{
display: inline-block;
}
#nav ul li:hover
{
background-color: #333;
}
#nav ul li a,visited
{
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover
{
color: #ccc;
text-decoration: none;
}
#nav ul ul li
{
display: block;
}
#nav ul li:hover ul
{
display: block;
}
#nav ul ul
{
display: none;
position: absolute;
background-color: #333;
}
#nav ul ul li
{
display: block;
}
#nav ul ul li a,visited
{
color: #ccc;
}
#nav ul ul li a:hover
{
color: #099;
}
/*
.headerBreak
{
width: 100%;
height: 0;
margin-top: -125px;
border-bottom: 3px solid #a7e0ee;
}
*/
.recent
{
margin-top: 50px;
float: left;
}
.recent input
{
float: left;
margin: 0 5px;
}
.panel-body
{
background-color: white;
}
.panel-heading
{
background-color: #999;
color: #337ab7;
}
.panelFooter
{
float: left;
}
我意识到有些代码格式不正确，因为我现在正在使用移动设备。对此深表歉意。
最佳答案
我使用 z-index 做了以下操作，使下拉菜单位于面板上方:
#nav ul {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
z-index: 1; /* This was added to your code */
}
z-index 属性指定元素的堆叠顺序。
具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。通过 W3C 学校
关于HTML/CSS 下拉菜单不适用于移动设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35088490/