搜索
搜索

在Bootstrap中，如何将导航栏链接右对齐？

anUp_and-comer 发表于 Dev
115
anUp_and-comer

我的作业要求我编写必要的HTML，以使页面看起来像这样： 在此处输入图片说明

如何将“主页”，“联系人”，“关于我们”和“消息”链接与导航栏的右侧对齐？我知道如何在CSS中执行此操作，并且我确定Javascript中有一种方法，但是分配仅需要使用引导程序。我包含了我的HTML代码，以显示我尝试过的内容。调整窗口大小和无效链接时，请忽略格式问题。分配只需要复制图像。提前致谢！

另外，如果有人知道我使用的是哪种类型的引导程序，请告诉我。我想将其包含在问题的标签中，但没有使用过引导程序，也不知道版本。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>bootstrapMocksStep2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">LOGO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
          <div class="navbar-nav navbar-right">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a></li>
                <li><a class="nav-link" href="#">Contact</a></li>
                <li><a class="nav-link" href="#">About Us</a></li>
                <li><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Messages  <span class="badge badge-success">12</span></a></li>
            </ul>  
        </div>
     
    </nav>
        <h1 class = mt-3>Dashboard:</h1>
        <hr>
        <table class="table table-striped ml-2 mr-2">
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Team</th>
              <th scope="col">All Star</th>
              <th scope="col">Remove</th>
            </tr>
            <tr>
              <td>Steph</td>
              <td>Warriors</td>
              <td>Yes</td>
              <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Lebron</td>
                <td>Cavaliers</td>
                <td>Yes</td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Dwayne</td>
                <td>Heat</td>
                <td>Yes</td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Kobe</td>
                <td>Lakers</td>
                <td>Yes  <span class="badge badge-warning">Legend</span></td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Isaiah</td>
                <td>Celtics</td>
                <td>Yes  <span class="badge badge-success">Who?</span></td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr> 
          </table>
          <hr>
        <h2 class= ml-2>Todos:</h2>
        <div class="alert alert-success mb-0 ml-2 mr-2" role="alert"><strong>
            Feel good about Bootstrap</strong>
          </div>
          <div class="alert alert-primary mb-0 ml-2 mr-2" role="alert"><strong>
            Feel informed about Bootstrap</strong>
          </div>
          <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Feel warned about Bootstrap</strong>
          </div>
          <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Maybe I should read the docs...</strong>
          </div>
          <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            Danger zone</strong>
          </div>
          <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            I really should read the docs...</strong>
    </div>
     

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

味道

好吧，您只需要在您的情况下使用flex方法，并使用元素justify-content-between上的引导程序中的类即可<nav>。

因此，您的最终代码应如下所示：

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>bootstrapMocksStep2</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-nav navbar-right">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a class="nav-link" href="#">Contact</a></li>
        <li><a class="nav-link" href="#">About Us</a></li>
        <li><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Messages  <span class="badge badge-success">12</span></a></li>
      </ul>
    </div>

  </nav>
  <h1 class=m t-3>Dashboard:</h1>
  <hr>
  <table class="table table-striped ml-2 mr-2">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Team</th>
      <th scope="col">All Star</th>
      <th scope="col">Remove</th>
    </tr>
    <tr>
      <td>Steph</td>
      <td>Warriors</td>
      <td>Yes</td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Lebron</td>
      <td>Cavaliers</td>
      <td>Yes</td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Dwayne</td>
      <td>Heat</td>
      <td>Yes</td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Kobe</td>
      <td>Lakers</td>
      <td>Yes <span class="badge badge-warning">Legend</span></td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Isaiah</td>
      <td>Celtics</td>
      <td>Yes <span class="badge badge-success">Who?</span></td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
  </table>
  <hr>
  <h2 class=m l-2>Todos:</h2>
  <div class="alert alert-success mb-0 ml-2 mr-2" role="alert"><strong>
            Feel good about Bootstrap</strong>
  </div>
  <div class="alert alert-primary mb-0 ml-2 mr-2" role="alert"><strong>
            Feel informed about Bootstrap</strong>
  </div>
  <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Feel warned about Bootstrap</strong>
  </div>
  <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Maybe I should read the docs...</strong>
  </div>
  <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            Danger zone</strong>
  </div>
  <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            I really should read the docs...</strong>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将导航栏链接右对齐

如何将 flexbox 导航栏向右对齐？

如何使用 Bootstrap 将导航栏的元素向右对齐？

Bootstrap 4将导航栏项目向右对齐

Bootstrap 4-将导航栏项目向右对齐

如何将导航项目与导航栏中的右侧对齐？

如何将Bootstrap 4导航栏项目与底部对齐

如何在 Vue.js 项目的导航栏中右对齐链接？

html-Bootstrap导航栏-如何左右对齐项目

React bootstrap Navbar：如何右对齐导航栏项

Bootstrap-导航栏中的右对齐菜单

如何将导航栏下拉列表与导航栏链接的其余部分对齐？

Bootstrap 导航栏项目未右对齐

Bootstrap导航栏右对齐按钮

如何在导航栏中右对齐文本-HTML

如何将徽标与导航栏对齐？

如何将导航栏与CSS对齐

如何将徽标与导航栏对齐

如何在 Bootstrap 4 导航栏中居中导航项并右对齐另一个？

在Bootstrap 5中将导航项向右对齐

如何调整右对齐导航栏的宽度

如何将导航栏列表与导航栏中徽标的右侧对齐？

Bootstrap 4 angular 5导航栏链接未向右对齐

如何将导航栏链接移至导航栏的右侧？

Bootstrap导航栏右不将导航项向右对齐

将 Bootstrap 4 导航栏链接对齐到底部

在Bootstrap 4中更正导航栏链接的垂直对齐

如何将中央导航栏仅与bootstrap 4.5.3对齐？

如何在 Bootstrap 4 中将导航栏项目向右对齐？

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档