优化Bootstrap平行四边形导航栏菜单 实现菜单项无缝贴合

问题原因 #

• Bootstrap默认给.nav-link设置了左右内边距，你将skew变形效果加在父级li元素上，但背景色绑定在.nav-link上，内边距导致变形后的背景边缘无法和相邻元素对齐
• 你使用的display: table-cell布局默认会在单元格之间保留微小间隙，经过skew变形后这个间隙会被放大为肉眼可见的空白缝
• 背景色和skew变形的承载元素不一致，也会加剧边缘错位的问题

修复方案 #

替换原CSS代码为以下内容即可实现平行四边形菜单项无缝贴合：

.navbar {
  padding-top: 0;
}

.navbar-nav {
  display: flex; /* 替换table布局消除单元格默认间隙 */
  width: 100%;
  margin: 0;
  padding: 0;
}

.navbar-nav>li {
  flex: 1; /* 均匀分配菜单宽度 */
  text-align: center;
  transform: skewX(-40deg);
  -o-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  -webkit-transform: skewX(-40deg);
  overflow: hidden;
  transition: all 350ms ease-out;
  -webkit-transition: all 350ms ease-out;
  -moz-transition: all 350ms ease-out;
  -o-transition: all 350ms ease-out;
}

/* 消除变形后相邻元素的重叠间隙 */
.navbar-nav>li:not(:last-child) {
  margin-right: -1px;
}

.navbar-nav>li span {
  display: inline-block;
  transform: skewX(40deg);
  -o-transform: skewX(40deg);
  -moz-transform: skewX(40deg);
  -webkit-transform: skewX(40deg);
}

.navbar-nav .show>.nav-link,
.navbar-nav .nav-link {
  color: #000;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0; /* 保留上下内边距，移除左右内边距避免边缘错位 */
  transition: all 350ms ease-out;
  -webkit-transition: all 350ms ease-out;
  -moz-transition: all 350ms ease-out;
  -o-transition: all 350ms ease-out;
}

/* 背景色改到li元素上，和skew变形载体保持一致 */
.navbar-nav>li:has(.active),
.navbar-nav>li:hover {
  background: #000;
}

.navbar-nav .active,
.navbar-nav .nav-link:hover {
  color: #FFF;
}

如果需要兼容不支持:has选择器的旧浏览器，可以通过JS给包含激活链接的li元素主动添加active类，再把对应选择器修改为.navbar-nav>li.active即可。

内容的提问来源于stack exchange，提问作者Hashim Aziz