Bootstrap 4菜单切换按钮向左和向右,品牌居中 [英] Bootstrap 4 menu toggle button to left and right, with brand in center
问题描述
我有一个导航栏菜单,在大屏幕上看起来像这样:
I have a navbar menu that looks like this on large screens:
并在较小的屏幕上折叠:
And collapses to this on smaller screens:
但是我想左边有一个菜单按钮,右边有另一个菜单按钮,品牌在中间.像这样:
But I would like to have one menu button to the left, the other menu button to the right, with the brand in the center. Like this:
我不确定这是否可行,诀窍是什么?
I'm not sure if this is possible, and if so what the trick is?
代码(使用bootstrap 4 beta):
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
<a class="navbar-brand logo-font" href="#">
Brand
</a>
<!-- links toggle -->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dropdown 1</a>
<a class="dropdown-item" href="#">Dropdown 2</a>
<a class="dropdown-item" href="#">Dropdown 3</a>
</div>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Register</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</div>
</nav>
推荐答案
是的,Bootstrap 4确实有一个很好的技巧.这称为重新排序.
Yes, Bootstrap 4 does have a pretty neat trick for that. It's called reordering.
将第一个导航栏切换器上的ml-auto
类替换为order-first
类.这将把它作为第一项.
Replace the ml-auto
class on the first navbar-toggler with the order-first
class. This will put it as the first item.
注意:将与第一个导航栏切换器关联的HTML代码移到navbar-brand的HTML之前,将获得相同的效果.但是我觉得使用类更加优雅和灵活,而不是四处移动HTML代码.
Note: Moving the HTML code associated with the first navbar-toggler before the HTML for the navbar-brand would achieve the same effect. But I feel that using classes is more elegant and flexible instead of moving chunks of HTML code around.
仅在需要时,导航栏切换器才可见.这就是为什么在这种情况下将其放置在第一位效果很好的原因.
The navbar-toggler only becomes visible when needed. That's why placing it first works well in this case.
这是代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
<a class="navbar-brand logo-font" href="#">
Brand
</a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dropdown 1</a>
<a class="dropdown-item" href="#">Dropdown 2</a>
<a class="dropdown-item" href="#">Dropdown 3</a>
</div>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Register</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
这篇关于Bootstrap 4菜单切换按钮向左和向右,品牌居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!