Html 对齐内容：未能按预期对齐元素之间的间距

我需要使用flexbox来居中导航，因此我提出了以下建议：

.navbar品牌>img{
宽度：100px；
}
.navbar默认值{
背景色：#fff；
边框颜色：#fff；
-webkit盒阴影：0 3pxRGBA（0,0,0,3）；
长方体阴影：0 3pxRGBA（0,0,0,3）；
}
.navbar默认值.navbar nav>li>a{
颜色：#4646；
文本转换：大写；
}
.navbar默认值.navbar nav>li>a:悬停，
.navbar默认值.navbar导航>li>a:焦点，
.navbar默认值。navbar nav>li>a:活动{
颜色：#7272；
}
.navbar默认值.navbar nav>li:未（.active）>a:之前{
内容：''；
位置：绝对位置；
底部：0；
左：30%；
右：30%；
高度：1px；
背景：#ed1c24；
不透明度：0；
-webkit转换：translateY（10px）；
-ms变换：translateY（10px）；
-o-变换：translateY（10px）；
变换：translateY（10px）；
-webkit转换：all.3s；
-o-transition:all.3s；
过渡：全部3秒；
}
.navbar默认值.navbar nav>li>a:悬停：之前{
不透明度：1；
-webkit转换：无；
-ms转换：无；
-o变换：无；
转化：无；
}
.navbar默认值.navbar导航>li:第一个子项>a{
字号：700；
}
.navbar默认值.navbar导航>li.active>a{
背景：#ed1c24；
颜色：#fff；
填充顶部：25px；
垫底：25px；
位置：相对位置；
-webkit转换：all.3s；
-o-transition:all.3s；
过渡：全部3秒；
}
.navbar默认值.navbar nav>li.active>a:悬停，
.navbar默认值.navbar nav>li.active>a:focus，
.navbar默认值.navbar导航>li.active>a:活动{
背景：#e0222a；
颜色：#fff；
}
.navbar默认值.navbar导航>li.active:悬停>a:之后{
底部：0；
}
.navbar默认值.navbar nav>li.active>a:after{
字体系列：Fontsome；
内容：'\f078'；
位置：绝对位置；
底部：5px；
字号：0.6em；
/*不透明度：0.8*/
左：50%；
-webkit转换：translateX（-50%）；
-ms转换：translateX（-50%）；
-o-转换：translateX（-50%）；
转化：translateX（-50%）；
-webkit转换：all.3s；
-o-transition:all.3s；
过渡：全部3秒；
}
/*使用flexbox将992px上方的导航元素居中对齐*/
@介质（最大宽度：992px）{
.navbar默认值.navbar nav>li>a{
文本对齐：居中；
}
.导航栏倒塌{
最大高度：350px；
溢出y：隐藏；
}
}
@介质（最小宽度：992px）{
.navbar默认值{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.navbar默认值{
最小高度：100px；
}
.navbar默认值。navbar右侧{
显示器：flex；
对齐项目：居中；
}
.navbar默认值>.container{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
}

切换导航

问题是与引导样式表冲突，引导样式表将伪元素放置在flex容器中。这会导致

之间的空间计算多个弹性项，而不是两个弹性项

这是您的flex容器：

徽标和导航菜单与

之间的空间对齐，但不位于相对边缘。对齐看起来更像周围的空间

---

这里是引导的

：：在
之前和
之后：
伪元素（或伪弹性项）：

如图所示：

在flow
：：after
和
：：before
中，伪元素是弹性项



让我们把一些内容放在pseudo中：

就像汽车旅馆房间里的黑光，你会看到很多你希望不存在的东西



删除（或覆盖）伪元素，问题就消失了：



有关flex容器和伪元素的更多详细信息：




（见方框81）
#徽标{
位置：绝对位置；
浮动：左；
左：10px；
}

因为flex定位的项目只直接响应子元素。用div将
.container
类下的所有内容包装起来，并为该div提供
位置：flex
和
对齐内容：空格之间的属性

例如：

<nav>
 <div class="container">
    <div class="wrapper">
      ...
    <div>
 </div>
</nav>

<style>
.wrapper {
  position: flex;
  justify-content: space-between;
}
</style>


...
.包装纸{
位置：flex；
证明内容：之间的空间；
}
我认为
内容：”将使其不起作用
之间的间距
。试着找到解决办法。一旦得到，然后让你知道。到目前为止，试图找到自己或其他人可能有解决办法。@ketan检查最后一个例子，我现在正在使用该解决办法。。但事实上，间隔应该是有效的！我不知道为什么不是！
<nav>
 <div class="container">
    <div class="wrapper">
      ...
    <div>
 </div>
</nav>

<style>
.wrapper {
  position: flex;
  justify-content: space-between;
}
</style>