Question

如何在bootstrap-4中将链接与导航栏右侧对齐。以下是我的代码：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="mr-auto">
    <div class="float-right">
      <ul class="navbar-nav">
        <li class="nav-item mr-3">
          <a href="#"><i class="fa fa-commenting-o text-light fa-lg"></i></a>
        </li>
        <li class="nav-item mr-3">
          <div class="dropdown">
            <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-ellipsis-v text-light fa-lg"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

我希望评论图标和垂直省略号图标在导航栏的右侧移动

Answer 1

Does this answer your question?

将mr-auto添加到您要对齐的班级，然后从导航班中删除navbar-expand-lg。
Codepen Example

使用Bootstrap 4在Navbar上将链接与右对齐

1 个答案: