我正在使用Bootstrap 4,我希望将navbar-brand项目(只是一个文本元素)放在最右边。 菜单(通常)默认为左侧。
我尝试过应用ml-auto、mx-auto、mr-auto、pull-right等,但都无法实现我想要的效果。
对于小屏幕,mx-auto很好用。 当汉堡菜单出现时,它会将navbar-brand居中。 但是,我需要在常规菜单出现时也能起作用的东西。
以下是我的代码:
我尝试过应用ml-auto、mx-auto、mr-auto、pull-right等,但都无法实现我想要的效果。
对于小屏幕,mx-auto很好用。 当汉堡菜单出现时,它会将navbar-brand居中。 但是,我需要在常规菜单出现时也能起作用的东西。
以下是我的代码:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
<a href="#" class="navbar-brand navbar-right">BSB Feedback</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>