0
私はドロップダウンメニュー付きのナビゲーションバーを持っていますが、モバイルに表示されると100％にはなりません。私は、画面が768px（Mobile First）より小さい場合、class = "col-"を持つすべての列が100％表示されるようにしましたが、ドロップダウンメニューは親メニューと同じようにこのルールに従いません。絶対、ブロックレベル要素に要素の位置を変更する場合は、もはやそれの幅は親の100％を記入します。この？事前にThxを！ドロップダウンメニューはモバイル時には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>
あなたの答えをありがとうが、私はかなり恐れています。私は.dropdown-contentに100％幅を追加しましたが、何も変更しません。間違ったクラスに入れましたか？ – vanberla