让品牌和汉堡包在 XS 视图中向左和向右对齐，而不是向中心对齐

Question

我有以下菜单：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="navbar-collapse w-100 order-1 order-md-0 dual-collapse2 collapse" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
<li class="nav-item">
<a class="nav-link">menu item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
</ul>
</div>

<div class="mx-auto order-0 mobiler">
<a class="navbar-brand mx-auto" href="#">brand</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse w-100 order-3 dual-collapse2 collapse" style="">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
</ul>
</div>
</div>
</nav>

使用引导程序 4，我创建了一个左菜单，一个右菜单，品牌(在移动设备中是汉堡包(在中间。唉，在移动xs视图中，两者都居中，我希望它们出现在左侧和右侧。

我尝试使用媒体查询，但我不断弄乱我的格式。 请帮忙

Answer 1

尝试使用 bootstrap 4：

.navbar-brand{
	position: absolute;
}
/*media queries for mobile view*/
@media (max-width: 575px){
	.navbar-brand{
	right: 10px; 
	top: 10px;
}

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav  mr-0">
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
<li class="nav-item">
<a class="nav-link">menu item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
</ul>
<div class="right-menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">menu item</a>
</li>
</ul>
</div>
</div>
</nav>