![](/img/trans.png)
[英]Bootstrap 4 Navbar Toggler Button shifting to new line on small screens after adding logo to Navbar Brand
[英]Bootstrap 4 navbar toggler is on top of my logo on small screens
我在小屏幕上遇到问题,无法弄清楚为什么会这样。
这是一个演示: https : //jsfiddle.net/7ww6ybpk/
这是代码:
<!-- main navigation -->
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">
<img class="img-fluid" src="https://twocan.co/public/images/shared/logos/logo-header.png" alt="Learn English with twocan.com" />
</a>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">
<i class="fa fa-home" aria-hidden="true"></i>
Foo
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<i class="fa fa-certificate"></i>
Foo
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<i class="fa fa-lightbulb-o"></i>
Foo
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">
<i class="fa fa-sign-in"></i>
Foo
</a>
</li>
<span class="navbar-text">
/
</span>
<li class="nav-item">
<a class="nav-link" href="">
Foo
<i class="fa fa-check"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- end main navigation -->
因此,如您所见,徽标位于汉堡菜单下方...我该如何解决?
请尝试以下代码。 我已经在导航栏中指定了右侧元素,当它折叠时,所有东西都聚集在一起。 我希望这就是您要寻找的。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">
<img class="img-fluid" src="https://twocan.co/public/images/shared/logos/logo-header.png" alt="Learn English with twocan.com" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Foo</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Foo Drop<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Foo 1 </a></li>
<li><a href="#">Foo 2</a></li>
<li><a href="#">Foo 3</a></li>
</ul>
</li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
</ul>
<!--Right Side-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Foo R1 </a></li>
<li><a href="#">Foo R2</a></li>
</ul>
</div>
</div>
</nav>`enter code here`
不要在.container
中嵌套.container
。 如果需要,可以在其中使用.container-fluid
。
而且您的自定义CSS是嵌套的-除非您使用允许嵌套的预处理器,否则CSS不会那样工作。
.navbar { border-bottom: 1px solid #eeeeee; } .nav-link { font-weight: 800; } .nav-item.active .nav-link { color: #7cd97c !important; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <!-- main navigation --> <nav class="navbar navbar-toggleable-md navbar-light"> <div class=""> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href=""> <img class="img-fluid" src="https://twocan.co/public/images/shared/logos/logo-header.png" alt="Learn English with twocan.com" /> </a> <div class="collapse navbar-collapse" id="mainNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href=""> <i class="fa fa-home" aria-hidden="true"></i> Foo </a> </li> <li class="nav-item"> <a class="nav-link" href=""> <i class="fa fa-certificate"></i> Foo </a> </li> <li class="nav-item"> <a class="nav-link" href=""> <i class="fa fa-lightbulb-o"></i> Foo </a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href=""> <i class="fa fa-sign-in"></i> Foo </a> </li> <span class="navbar-text"> / </span> <li class="nav-item"> <a class="nav-link" href=""> Foo <i class="fa fa-check"></i> </a> </li> </ul> </div> </div> </nav> <!-- end main navigation -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.