我将尝试将两个ul组合成一个带有分隔符的响应式导航栏,而不会弄乱第二个ul的css样式。 我已经尝试使用媒体查询,但是我无法使其正常工作。 更明确地说,当第一个ul折叠时,我需要它居中,然后有一个分隔符,然后在其下方居中另一个ul。
HTML:
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container">
<a href="#" class="navbar-brand"><img src="img/logo.png" alt="Akrotopi Apartments"></a>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="menu-icon-bar"></span>
<span class="menu-icon-bar"></span>
<span class="menu-icon-bar"></span>
</button>
<div id="main-nav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li><a href="#" id="home" class="nav-item nav-link active">Αρχική</a></li>
<li><a href="#" class="nav-item nav-link">Σχετικά</a></li>
<li><a href="#" class="nav-item nav-link">Δωμάτια</a></li>
<li><a href="#" class="nav-item nav-link">Επικοινωνία</a></li>
<div class="dropdown-divider" ></div>
<div id="lang">
<ul>
<li><a href="index.html" id="active">GR</a></li>
<li><a href="lang.en.html">EN</a></li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
CSS:
@media screen and (max-width: 768px) {
.navbar-brand {
margin-left: 20px;
}
.navbar-nav {
text-align: center;
padding: 0 20px;
background-color: #f8f9fa00;
}
.navbar.fixed-top .navbar-nav {
background: transparent;
}
}
#lang ul{
position:absolute;
top:15px;
right:10px;
list-style:none;
padding:0;
margin:0;
}
}
有没有关于如何修复它的想法?
谢谢!!