html - 下面 div 上的 bootstrap 4 下拉菜单
问题描述
我试图让 bootstrap 4 响应式顶部导航出现在我的容器 div 上,但没有运气,我似乎无法找到解决方案。
以下是 Top nav 的工作方式
W3Schools 编辑器
这是我的代码
jsfiddle
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: visible;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<button class="dropbtn">Equipment
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="equip.php">Manage equipment</a>
<a href="add_equip.php">Add equipment</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Stock
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Stock.php">Manage stock</a>
<a href="add_stock.php">Add stock</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Reports
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Report 1 </a>
<a href="#">Report 1 </a>
<a href="#">Report 1 </a>
</div>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<?php echo display_msg($msg); ?>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-box clearfix">
<div class="panel-icon bg-green">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="panel-value pull-right">
<h2 class="margin-top">
<?php echo $c_contractors['total']; ?> </h2>
<p class="text-muted">Contractors</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-box clearfix">
<div class="panel-icon pull-left bg-red">
<i class="glyphicon glyphicon-list"></i>
</div>
<div class="panel-value pull-right">
<h2 class="margin-top">
<?php echo $c_jobs_active['total']; ?> </h2>
<p class="text-muted">Active Jobs</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-box clearfix">
<div class="panel-icon pull-left bg-blue">
<i class="glyphicon glyphicon-list"></i>
</div>
<div class="panel-value pull-right">
<h2 class="margin-top">
<?php echo $c_jobs_pending['total']; ?> </h2>
<p class="text-muted">Pending jobs</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-box clearfix">
<div class="panel-icon pull-left bg-yellow">
<i class="glyphicon glyphicon-list"></i>
</div>
<div class="panel-value pull-right">
<h2 class="margin-top">
<?php echo $c_jobs_completed['total']; ?>
</h2>
<p class="text-muted">Completed Jobs YTD</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="jumbotron text-center">
<h1>Any problems let me know.</h1>
</div>
</div>
</div>
</div>
</div>
我确信这是我看过的一些简单的
干杯,
解决方案
首先,将 .topnav 类更改为:
.topnav {
float:left;
width:100%;
position:relative;
background-color: #333;
}
然后从 .dropdown 类中删除溢出。最后,在 .dropdown-content 类中将 position: relative 更改为 position: absolute。
不要忘记在容器流体之前添加一个明确的:两种样式。
这是小提琴。
推荐阅读
- c# - Asp.net Core RequestSizeLimit 仍然执行动作
- ios - 在背景上渲染 Alpha 通道视频 (AVFoundation, Swift)
- swift - 我的图像 addSubview 添加了比预期更大的视图
- docker - 如何检查容器的 IP,获取它并将其添加到具有本地域名解析的 /etc/hosts 文件中
- ffmpeg - 色度键我的过滤白色背景命令有效,但过滤白色和黑色?
- c# - C# 关于对象创建
- python - 如何在 Python 中连接多个数据帧?
- python - 如何在 ANN 中设置 Bias 并将 Sigmoid 更改为 ReLU 函数?
- regex - 正则表达式 - 如何在连续排除两个字符的同时匹配单个字符?
- css - 如何使用 CSS 禁用文本装饰?