Bootstrap 4 导航分隔符
Bootstrap 4 Navigation Divider
我一直在尝试将两个 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;
}
}
有什么解决办法吗?
谢谢!!
首先:当前嵌套 <ul>
tags 的方式无效,因为 <ul>
只能有 <li>
元素作为其直接子元素。因此,您要么必须将嵌套的 <ul>
包装到 <li>
中,要么将两个 <ul>
置于同一级别。在这种情况下,我建议选择后者。
此外,您可以将 #lang
id 直接应用于 <ul>
标签,而不使用包装器 div。 divider 可以在较小的设备上应用简单的顶部边框 属性。
话虽如此,您的标记和 css 可能如下所示。
@media screen and (max-width: 768px) {
.navbar-brand {
margin-left: 20px;
}
.navbar-nav {
text-align: center;
padding: 0 20px;
/*background-color: #f8f9fa00; invalid color value */
}
.navbar.fixed-top .navbar-nav {
background: transparent;
}
#lang {
border-top: 1px solid #f8f9fa;
}
}
@media screen and (min-width: 767px) {
#lang {
position:absolute;
top:15px;
right:10px;
list-style:none;
padding:0;
margin:0;
}
}
<nav class="navbar navbar-expand-md navbar-dark bg-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>
</ul>
<ul class="navbar-nav" id="lang">
<li><a href="index.html" id="active">GR</a></li>
<li><a href="lang.en.html">EN</a></li>
</ul>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
我一直在尝试将两个 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;
}
}
有什么解决办法吗?
谢谢!!
首先:当前嵌套 <ul>
tags 的方式无效,因为 <ul>
只能有 <li>
元素作为其直接子元素。因此,您要么必须将嵌套的 <ul>
包装到 <li>
中,要么将两个 <ul>
置于同一级别。在这种情况下,我建议选择后者。
此外,您可以将 #lang
id 直接应用于 <ul>
标签,而不使用包装器 div。 divider 可以在较小的设备上应用简单的顶部边框 属性。
话虽如此,您的标记和 css 可能如下所示。
@media screen and (max-width: 768px) {
.navbar-brand {
margin-left: 20px;
}
.navbar-nav {
text-align: center;
padding: 0 20px;
/*background-color: #f8f9fa00; invalid color value */
}
.navbar.fixed-top .navbar-nav {
background: transparent;
}
#lang {
border-top: 1px solid #f8f9fa;
}
}
@media screen and (min-width: 767px) {
#lang {
position:absolute;
top:15px;
right:10px;
list-style:none;
padding:0;
margin:0;
}
}
<nav class="navbar navbar-expand-md navbar-dark bg-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>
</ul>
<ul class="navbar-nav" id="lang">
<li><a href="index.html" id="active">GR</a></li>
<li><a href="lang.en.html">EN</a></li>
</ul>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>