Bootstrapv5.0.0-beta1-ml-auto不适用于导航栏

html5 • • 问答 • 38 阅读

我正在尝试设置一个导航栏，当屏幕足够大且栏未折叠时，链接将位于右侧。然而，尽管将 ml-auto 作为类包含在无序列表 (ul) 标签中，链接（联系方式、定价、下载）仍然停留在品牌项目旁边的左侧。我该如何解决？以下是代码：

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <section>
    <nav>
      <a href="#">brand</a>
      <button type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
      </button>
      <div>
        <div>
          <ul>
            <li>
              <a href="#">Contact</a>
            </li>
            <li>
              <a href="#">Pricing</a>
            </li>
            <li>
              <a href="#">Download</a>
            </li>
          </ul>
        </div>
      </div>
   </nav>

回答

请将justify-content-end添加到您的 div 类

例子：

以上是Bootstrapv5.0.0-beta1-ml-auto不适用于导航栏的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容