gpt4 book ai didi

html - 在所有屏幕尺寸上保留导航项

转载 作者:行者123 更新时间:2023-11-27 23:32:03 25 4
gpt4 key购买 nike

我正在尝试构建一个 Bootstrap 导航栏,它在左侧有导航链接,在右侧有一些用户图标。
在移动设备上,导航链接应该折叠,但图标应该留在(或者甚至居中?)到汉堡图标。

它在桌面上看起来不错(宽度 > 768 像素)。但是在小宽度上,图标显示在彼此下方而不是彼此相邻。

到目前为止,这是我的代码:

<nav class="navbar navbar-inverse navbar-fixed-top bo-header">
<div class="container">
<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="#">MY BRAND</a>
</div>
<!-- non-collapsing items -->
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-users"></i></a></li>
<li><a href="#"><i class="fa fa-wrench"></i></a></li>
</ul>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Nav Entry 1</a></li>
<li><a href="#">Nav Entry 2</a></li>
<li><a href="#">Nav Entry 3</a></li>
<li><a href="#">Nav Entry 4</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

工作 jsfiddle: http://jsfiddle.net/n9KtL/188/

感谢您的帮助!

最佳答案

这是一个示例,说明如何将图标保留在导航栏 container 中(这样 navbar 中的所有元素都保持一致),然后将图标放置在保持暴露的位置768px 以下的视口(viewport)。

@media (max-width: 767px) {
.navbar .navbar-right.navbar-top {
position: absolute;
margin-top: 4px;
right: 80px;
}
.navbar .navbar-right.navbar-top > li {
display: inline-block;
}
.navbar .navbar-right.navbar-top > li > a {
padding-right: 10px;
padding-left: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top bo-header">
<div class="container">
<ul class="nav navbar-nav navbar-right navbar-top">
<li><a href="#"><i class="fa fa-envelope"></i></a>
</li>
<li><a href="#"><i class="fa fa-users"></i></a>
</li>
<li><a href="#"><i class="fa fa-wrench"></i></a>
</li>
</ul>
<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="#">MY BRAND</a>
</div>
<!-- non-collapsing items -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Nav Entry 1</a>
</li>
<li><a href="#">Nav Entry 2</a>
</li>
<li><a href="#">Nav Entry 3</a>
</li>
<li><a href="#">Nav Entry 4</a>
</li>
</ul>
</div>
</div>
</nav>

关于html - 在所有屏幕尺寸上保留导航项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35297437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com