Bootstrap 4 Navigation-Divider
Ich habe versucht, zu kombinieren zwei ul in einem responsive-navigation-bar mit Teiler, ohne messing mit den Sekunden ul-css.
Ich habe versucht mit mediaqueries, aber ich habe nicht in der Lage, damit es funktioniert.
Um es klar zu stellen, ich brauche die erste ul, wenn es zusammenbricht zentriert werden, dann eine Trennlinie und danach haben die anderen ul-zentriert darunter.
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;
}
}
Irgendwelche Ideen auf, wie man es beheben?
Danke!!!!
InformationsquelleAutor AthenaBK | 2018-01-23
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erste Sache, die erste: die aktuelle Art und Weise, wie Sie die Verschachtelung der
<ul>
- tags ungültig ist, als<ul>
nur<li>
Elemente als Ihre unmittelbaren Kinder. So haben Sie entweder wickeln Sie das verschachtelte<ul>
in eine<li>
oder haben die beiden<ul>
auf der gleichen Ebene. In diesem Fall würde ich vorschlagen, gehen mit der letzteren.Auch, konnte Sie
#lang
- id direkt auf die<ul>
tag, ohne das wrapper-div. Der Teiler als könnte gestaltet werden mit einem einfachen border-top-Eigenschaft angewendet auf kleineren Geräten.Gesagt, dass Ihr markup und css könnte so etwas wie folgt.
CSS:
HTML: