[英]In Bootstrap 3 how do I fix my navbar?
In Bootstrap 3 how do I get the navbar-right to work correctly on mobile? 在Bootstrap 3中如何让导航栏权限在移动设备上正常工作? In my project for some reason when the browser shrinks down it puts my navbar-right item on the next line.
在我的项目由于某种原因,当浏览器缩小时,它将我的导航栏右项放在下一行。
I've tried setting pull right on it, and setting pull-left on the brand image, but no luck. 我已经尝试在它上面设置拉力,并在品牌形象上设置左拉,但没有运气。
I'm assuming there is something I'm doing wrong in Bootstrap or a class I need to add. 我假设在Bootstrap或我需要添加的类中有些东西我做错了。 Please help.
请帮忙。
Here is what it looks like on mobile: 这是它在移动设备上的样子:
Here is what I want it to look like on mobile: 这是我想在移动设备上看起来的样子:
On desktop it works fine. 在桌面上它工作正常。
Here is my navbar
html: 这是我的
navbar
html:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
</div>
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="/apply/">Continue Application</a>
</ul>
</div>
</div>
</nav>
</header>
Please help. 请帮忙。
Following Bootstrap 3 styling, your navbar
element should show the mobile toggle button when in responsive resolution, like in this example . 在Bootstrap 3样式之后,您的
navbar
元素应在响应式分辨率时显示移动切换按钮,如此示例中所示 。
If you want to have only those two elements of your interface in the same position inside a navbar
element you could edit your html
as follows: 如果您希望界面中只有这两个元素位于
navbar
元素内的相同位置,您可以按如下方式编辑html
:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
<a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
</div>
</div>
</nav>
</header>
But I suggest you to implement a mobile toggle button with a collapsed menu to improve your users experience. 但我建议您使用折叠菜单实现移动切换按钮,以改善用户体验。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.