这个问题在这里已有答案:
我正在尝试使用左侧的导航项和右侧的社交/联系人图标创建Bootstrap导航栏 . 我希望导航项目崩溃,但社交/联系项目不会崩溃 . 他们应该在那里点击移动用户 .
我已经查看了类似问题的一些答案,但不幸的是,Bootstrap v4不向后兼容,并且解决方案不再有效 .
我的代码看起来非常简单 . 如果我将社交/联系项目放在他们自己的div中,在崩溃div之外,他们就会很有趣 . 但是,如果我将它们放入崩溃div中,它们排列就好了 . 但是,他们崩溃了,我不想要 . 我试着用flex参数搞砸了一下,但这似乎只会让事情变得更糟 .
在理想的世界中,在移动视图中,我只有社交/联系人图标和右边的汉堡菜单按钮 .
#phone-number {
padding: 0 1em;
font-weight: bold;
}
.navbar-right {
flex-direction: row;
}
@media (max-width: 767px) {
#phone-number {
display: none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<div class="navbar-nav mr-auto mt-2 mt-lg-0">
<a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
</div>
</div>
<div class="nav navbar-nav navbar-right">
<a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<div class="navbar-nav mr-auto mt-2 mt-lg-0">
<a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
</div>
<div class="nav navbar-nav navbar-right">
<a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a>
</div>
</div>
</nav>
2 回答
在按钮后添加
nav navbar-nav navbar-right
然后#navbarTogglerDemo02
工作小提琴https://jsfiddle.net/j2pwtj5x/
这是我的答案,希望它可以帮助你谢谢
我不知道为什么它在这里显示错误,但它的工作精细检查小提琴