将边框底部应用于引导程序 4 中的活动项目后，导航项目未在同一行中对齐答案

【问题标题】：Nav items not aligned in the same line after applying border-bottom to the active item in bootstrap 4将边框底部应用于引导程序 4 中的活动项目后，导航项目未在同一行中对齐
【发布时间】：2020-04-09 02:58:42
【问题描述】：

在将边框应用于活动项后，我需要帮助将导航项对齐在同一行中

我的StackBlitz code

提前致谢。

【问题讨论】：

您需要在您的问题中发布minimal reproducible example。将其发布在可能会消失、被阻止或消失的第三方网站上会使您的问题对未来的访问者失去所有价值。

标签： css bootstrap-4 flexbox navbar

【解决方案1】：

您可以做的一件事是将border-bottom: 5px solid transparent; 添加到li。这是因为盒子模型。由于活动元素定义了边框，它的框会比非活动元素大。

.navbar {
  height: 100px;
}

ul {
  height: 100%;
}

li {
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 10px;
  border-bottom: 5px solid transparent;
}

.active {
  border-bottom: 5px solid red;
}

【讨论】：

【解决方案2】：

这可能就是你想要的

.navbar {
    height: 100px;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    background-color: lightpink;
    padding: 0 10px;
}

.nav-item:not(:last-child) {
    margin-right: 10px;
}

.active {
    border-bottom: 5px solid yellow;
}

或

.navbar {
    height: 100px;
}

ul {
    height: 100%;
    background-color: lightpink;
    padding-left: 10px;
}

li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    position: relative;
}

li.active::after {
  content: '';
  position: absolute;
  background: red;
  height: 5px;
  width: 100%;
  bottom: 0;
  left: 0;
}

【讨论】：

【解决方案3】：

检查一些可能性：

将padding-top: 5px 添加到活动项目。
将所有<li> 元素与border-bottom 相同，但在活动类中更改border-color 或透明度。
使用伪元素模拟border-bottom。请在此处查看以下代码或查看此Codepen

ul {
  display: flex;
  list-style: none;
  background-color: lightgray;
}

ul li {
  padding: 20px;
  position: relative;
}

ul li.active::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 5px;
  background-color: red;
  left: 0;
  bottom: 0;
}

<ul>
  <li>Item</li>
  <li class="active">Item</li>
  <li>Item</li>
</ul>

【讨论】：