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

早恋

如何在特定位置对齐我的导航项目?我希望我的品牌名称在左侧,我的登录按钮在导航栏的右端,我是引导程序的新手,帮助我解决这个问题。

.navbar-brand {
  font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link navbar-brand active" href="#">NotePro</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#">LogIn</a>
    </li>
  </ul>
</div>

结果图

杰拉德

您可以为ul元素使用 Bootstrap 类 d-flex 和 justify-content-between 可以在此处找到更多详细信息

.navbar-brand {
  font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <ul class="nav d-flex justify-content-between">
    <li class="nav-item">
      <a class="nav-link navbar-brand active" href="#">NotePro</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#">LogIn</a>
    </li>
  </ul>
</div>

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章