【发布时间】：2017-10-12 23:55:59
【问题描述】：
我有一个带有下拉菜单的导航栏，但在移动设备上显示时它们不会 100% 显示。我做到了，当屏幕小于 768px（移动优先）时，所有 class="col-' 的列都显示为 100%。但是下拉菜单不像父菜单那样遵循这个规则。我怎么能解决这个问题？提前谢谢！
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Fullscreen backgrounds with centered content">
</head>
<body>
<div class="col-12 navbar-0">
<div class="col-10 col-container col-center-block navbar-1">
<div class="colom col-4 home"><strong><a href="index.php">HOME</a></strong></div>
<div class="colom col-4 dropdown aanbod">
<button onclick="myFunction()" class="dropbtn">BERLAMO</button>
<div id="myDropdown" class="dropdown-content col-12">
<a href="http://berlamo.be/index.php/webdesign-2">ONE-PAGE-WEBSITES</a>
<a href="http://berlamo.be/index.php/huis-te-koop">HUIS TE KOOP</a>
<a href="index.php?option=com_content&view=article&id=4">PORTFOLIO</a>
</div>
</div>
<div class="colom col-4 contact"><strong><a href="http://berlamo.be/contactform.html">CONTACT</a></strong></div>
</div>
</div>
<style>
/*#FB4D4D red, #414F71; blue*/
/* Navigation */
.navbar-0 {
height: auto;
}
.navbar-1 {
text-align: center;
color: #414F71;
padding: 10px;
}
.home,
.contact {
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
text-align: center;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #414F71;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
margin-top: 10px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #414F71;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top: 1px solid #FB4D4D;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
/*2e drop*/
/* Dropdown Button */
.dropbtn2 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #414F71;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
margin-top: 10px;
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: #414F71;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top: 1px solid #FB4D4D;
}
/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
/*Einde drop*/
button:focus {
outline: 0;
}
</style>
<script type="text/javascript">
/*function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}*/
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
/*If you bind 2 onclick then only last one will fire*/
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
removeShow("dropdown-content");
}
if (!event.target.matches('.dropbtn2')) {
removeShow("dropdown-content2");
}
}
function removeShow(className) {
var dropdowns = document.getElementsByClassName(className);
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
</script>
【问题讨论】：
标签： css responsive-design