时间戳

首页 > 解决方案 > BootStrap 5.0 是否没有为组件右对齐的选项？

html - BootStrap 5.0 是否没有为组件右对齐的选项？

问题描述

我实际上正在尝试做这门在线课程，因为讲师使用的是 Bootstrap 4，但我决定我可以做 BootStrap 5.1。

我正在尝试使我的导航栏元素像右侧的有序列表一样，但是我检查了文档和所有内容，我似乎无法弄清楚为什么它不起作用。

所以我当前的导航栏是这样的： 在此处输入图像描述

所以我似乎无法到达那里，我使用了这些不同的变体：

  1.   <ul class="navbar-nav justify-content-end">

  2.   <ul class="navbar-nav me-auto mb-2 mb-lg-0">

  3.   <ul class="navbar-nav ml-auto>

另外，有人可以帮我理解我的意思吗？mb？毫升代表？以及如何在 BootStrap 5.0 中将其置于右侧

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>Priyanka Giri</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <div class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="">Name ABC</a>
      <ul class="navbar-nav ml-auto ml-2">
        <li class="nav-item">
        <a class="nav-link" href="">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Experience</a>
      </li>
    </ul>
    </div>
  </body>
</html>

更新：ms-auto WORKED 但这到底是什么意思？上面三个是什么意思？

标签： htmlcsstwitter-bootstrap

解决方案

  • .me是重命名的类名.mr，代表 margin-right属性

  • .mb是代表margin-bottom属性的类名

  • .ml是代表margin-left属性的类名

由于 Bootstrap 5.ml已重命名为.ms，并且.mr已重命名为.me.

有关迁移到 v5 的文档中的更多信息：https ://getbootstrap.com/docs/5.0/utilities/spacing/

说到您的代码，.ml-auto该类将您的导航项设置在左侧。它只是设置margin-left: auto;CSS。这可能不适用于较新的 Bootstrap。尝试用 重命名版本.ms-auto，这样您的代码将如下所示：

 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>Priyanka Giri</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <div class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="">Name ABC</a>
      <ul class="navbar-nav ms-auto ms-2">
        <li class="nav-item">
        <a class="nav-link" href="">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Experience</a>
      </li>
    </ul>
    </div>
  </body>
</html>

推荐阅读