发表新帖
发表新帖

Bootstrap 4 align navbar items to the right

后端 未结
关注
21 2662
無奈伤痛
無奈伤痛 2020-11-21 06:14

How do I align a navbar item to right?

I want to have the login and register to the right. But everything I try does not seem to work.

This is wha

相关标签:
21条回答
  • 生来不讨喜
    2020-11-21 07:16

    For those who is still struggling with this issue in BS4 simply try below code - 

    <ul class="navbar-nav ml-auto">
    0 讨论(0)
  • 小鲜肉
    2020-11-21 07:16

    Use ml-auto instead of mr-auto after applying nav justify-content-end to the ul

    0 讨论(0)
  • 野趣味
    2020-11-21 07:16

    The working example for BS v4.0.0-beta.2:

    <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
    0 讨论(0)
 看不清?
提交回复
热议问题