Bootstrap 4:在导航栏中向右对齐菜单? [英] Bootstrap 4: Justify menu to right in navbar?

问题描述

我正在使用Bootstrap 4默认导航栏，我只想添加一个折叠菜单，该菜单在未折叠时位于右侧，而不是左侧.

I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.

我尝试添加text-right和float-right，但实际上都没有将菜单移到右侧.

I have tried adding text-right and float-right, but neither are actually moving the menu to the right.

这是一个显示问题的靴子.

这也是一个代码段，因为StackOverflow希望我使用其中一个，尽管我认为它的宽度不足以显示未折叠的菜单:

Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button>
        <div class="collapse navbar-collapse float-right">
            <ul class="nav navbar-nav">
                <li class="active nav-item"><a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

推荐答案

将ml-auto类添加到包含菜单的ul标签中

Add ml-auto class to ul tag containing menu

<ul class="nav navbar-nav ml-auto">
   <li class="active nav-item">
      <a href="#" class="nav-link">Homes</a>
   </li>
   <li class="nav-item">
      <a href="#about" class="nav-link">About</a>
   </li>
   <li class="nav-item">
      <a href="#contact" class="nav-link">Contact</a>
   </li>
</ul>

这篇关于Bootstrap 4:在导航栏中向右对齐菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！