导航栏 - 在我的 html 文件中不起作用答案

【问题标题】：navbar - right not working in my html file导航栏 - 在我的 html 文件中不起作用
【发布时间】：2020-10-18 17:56:13
【问题描述】：

所以我是角度的初学者，我必须简单地制作一个导航栏。我将引导程序加载到 .json 文件中，它看起来像这样：-

 "styles": [
        "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"

        ],

而我的代码是这样的：-

<ul class=" nav navbar-nav navbar-right">

      <ul class="dropdown-menu">
        <li >
          <a class="nav-link" href="#">Save Data</a>
        </li>
        <li >
          <a class="nav-link" href="#">Fetch Data</a>
  </li>
  </ul>
  </ul>
  </div>
  </div>
  </nav>

输出是：-

我的保存数据和获取数据没有出现在右边。是什么原因？

【问题讨论】：

标签： html bootstrap-4 angular9

【解决方案1】：

只需将“navbar-right”替换为“ml-auto”即可。但是除了“navbar-right”之外，您的代码仍然有问题。应该是-

<ul class="navbar-nav ml-auto">
    <li >
        <a class="nav-link" href="#">Save Data</a>
    </li>
    <li >
        <a class="nav-link" href="#">Fetch Data</a>
    </li>
</ul>

我熟悉你正在使用的教程，所以我猜你正在创建一个下拉菜单，这应该是它的完整代码-

 <ul class = "navbar-nav ml-auto">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#"  role="button" data-toggle="dropdown">
      Manage
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Save Data</a>
      <a class="dropdown-item" href="#">Fetch Data</a>
    </div>
  </li>
</ul>

这些现有问题可能会有所帮助 -

【讨论】：

欢迎来到 StackOverflow！最好向 OP 解释为什么他的原始代码不起作用（ul 在ul 嵌套等）
谢谢！您能解释一下为什么专门使用 ml auto 吗？ :')
ml-auto is "margin left : auto" ;我想这与 bootstrap 4 使用 flexbox 来处理布局而不是浮动有关。