Question

如何在Bootstrap中进行Facebook导航，例如对齐？

在整个页面中运行代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
  <ul class="navbar-nav">
    <li class="nav-item"><a href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a></li>
  </ul>
</nav>

由于Facebook导航图标之间具有相等的间距，如何在导航中实现它？

注意：如果屏幕变大/变短，它会自动进行自我调整。

Answer 1

您可以使用flexbox均匀分隔每个导航项：

1/0

.navbar-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.navbar-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Answer 2

比我想象的简单，无需重新定义BS4 CSS。我修改了导航栏，以使用不带<div class="button"> <a id="link" href="http://www.google.com" target="_blank">Connect</a> </div>和ul的bs4标记...似乎更干净了

li

Answer 3

您可以执行以下操作：

   .navbar-nav {
      display: flex;
    }
    .nav-item {
      flex: 1;
      text-align: center;
      margin: 5px;
    }

导航图标之间的间距相等

3 个答案: