创建有两行响应的引导导航条
创建有两行响应的引导导航条
提问于 2016-12-23 12:12:42
我正在尝试创建一个响应型的基于引导带3的带两行的导航条。但是，我在HTML的结构和折叠功能方面有问题。
下面是对所需结果的可视化描述，我希望有人能在HTML/CSS方面指出正确的方向(尽可能多的默认引导功能)。
--本质上，菜单需要执行以下操作：
- 在平板电脑/桌面设备上，第一行是标识和小辅助链接菜单(链接1-3)。第二行是主菜单和主链接(LinkA)。
- 在手机上，经典的折叠设计应该与标志和汉堡包图标一起出现。扩展菜单首先显示主链接(LinkA)，然后显示次要链接(Link1-3)。
平板/桌面设备：
|----------------------------------------------------------|
| LOGO/BRAND Link1 Link2 Link3 |
|----------------------------------------------------------|
| LinkA LinkB LinkC LindD LinkE |
|----------------------------------------------------------|移动设备(折叠)：
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|移动设备(扩展)：
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|
| LinkA |
| LinkB |
| LinkC |
| LinkD |
| LinkE |
|--------------------------------------|
| Link1 |
| Link2 |
| Link3 |
|--------------------------------------|Stack Overflow用户
回答已采纳
发布于 2016-12-23 16:56:28
如果我有你的项目的html/css，我会用它来展示你应该怎么做，但是在这个上下文中，来自Bootstrap v3.3.7的静态导航条示例。
实际上，这个想法是将<div id="navbar" class="navbar-collapse collapse">放在<div class="navbar-header">下面的一行，浮动，并将其100%的空间宽度，然后用margin-top: -50px;拉出<ul class="nav navbar-nav navbar-right">。
有了这个媒体查询，我们就可以确保它在moblie设备中的行为正确。
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo/Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">LinkA</a></li>
<li><a href="#">LinkB</a></li>
<li><a href="#">LinkC</a></li>
<li><a href="#">LinkD</a></li>
<li><a href="#">LinkE</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>CSS
.navbar-collapse {
float: left;
width: 100%;
clear: both;
}
@media (min-width: 768px) {
.navbar-right {
margin-top: -50px;
}
}，，让我知道它是否有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41301318
复制相关文章
相似问题
腾讯云开发者
