间距和居中引导导航栏项目答案

【问题标题】：Spacing and centering bootstrap navbar items间距和居中引导导航栏项目
【发布时间】：2020-10-08 04:55:39
【问题描述】：

我正在制作一个电子商务网站，并希望在我的导航栏上显示这三个元素：左侧的徽标、中间的产品类别和右侧的头像。我试图将类别放在中间，但它们只是没有移动。它们固定在头像旁边。

<ul class="navbar-nav">
      <li class="nav-item active">
        <%= link_to "Diary", "#", class: "nav-link" %>
      </li>
      <li class="nav-item active">
        <%= link_to "Pen", "#", class: "nav-link" %>
      </li>
      <li class="nav-item active">
        <%= link_to "Tape", "#", class: "nav-link" %>
      </li>
    </ul>

我正在尝试 text-align center，为 UL 提供一个新类 inline-block，但没有任何效果。我不确定在哪里开设新课程或在哪里更改选项。我可以通过 ul 类将其居中，还是需要进入包含所有元素的 div？我只想将上述项目居中。

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

解决方案之一是像这样创建自己的导航。我没有使用引导程序，所以我在下面提供了简单的片段。

nav {
  width: 100%;
  height: 40px;
  background-color: #eee;
  padding: 5px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

nav .logo {
  width: 20%;
  height: 30px;
  background-color: red;
}

nav .navigation {
  width: 60%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

nav .navigation a {
  padding: 0 5px;
  text-decoration: none;
  color: #000;
}

nav .user {
  width: 20%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

nav .user a {
  padding: 0 5px;
  text-decoration: none;
  color: #000;
}

nav .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: yellow;
}

<nav>
  <div class="logo">LOGO</div>
  <div class="navigation">
    <a href="#">LINK</a>
    <a href="#">LINK</a>
    <a href="#">LINK</a>
    <a href="#">LINK</a>
    <a href="#">LINK</a>
  </div>
  <div class="user">
    <a href="#">ICON</a>
    <a href="#">ICON</a>
    <div class="user-avatar"></div>
  </div>
</nav>

【讨论】：

它没有用。它一点也不让步。容纳整个导航栏的主 div 使用空格。放置我的链接的第二次潜水使用 flex-grow: 0。我不确定是否应该更改这些。如果我在我的 ul 列表中添加一个类，它似乎并没有改变任何东西。

【解决方案2】：

你可以使用弹性盒子：

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

<ul class="navbar-nav">
  <li class="nav-item active">
    <%= link_to "Diary", "#", class: "nav-link" %>
  </li>
  <li class="nav-item active">
    <%= link_to "Pen", "#", class: "nav-link" %>
  </li>
  <li class="nav-item active">
    <%= link_to "Tape", "#", class: "nav-link" %>
  </li>
</ul>

或者，如果您使用 bootstrap 4，您可以添加以下类：d-flex justify-content-between

【讨论】：