Css 引导选项卡左侧出现意外填充

我正在使用Bootstrap4.1.3，注意到除了容器中的第一个选项卡之外，所有选项卡的左侧都有一些意外的填充

出于演示目的，我将选项卡容器的背景设置为绿色，非活动选项卡设置为白色，边框设置为蓝色，活动选项卡设置为红色。我希望看到零绿色-但是，在下面的示例中，您可以在第二个和第三个选项卡上看到它（从下面的选项卡容器背景）

例如：

我尝试使用Chrome Inspector查看是否在非第一个选项卡元素上计算了额外的样式（例如边距或填充），但没有

为什么会发生这种情况？

.tabs{
显示：内联块；
边框：1px实心#ECECEC；
边界半径：6px；
边缘底部：1.85714286em；
背景颜色：绿色；
填充：0；
}
.tabs li:未启用（.active）{
背景色：#fff！重要；
不透明度：1；
}
.tabs li.active{
背景色：红色；
}
.tabs>li{
显示：内联块；
不透明度：.5；
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.tabs>.active，
.选项卡：悬停{
不透明度：1；
}
.tabs-container.tabs--vertical.tabs li:非（：最后一个子项）{
边界权：无；
边框底部：1px实心#ECECEC；
}
李先生{
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
填充：0.92857143em 1.85714286em；
}
.tabs li:不是（：最后一个孩子）{
右边框：1px纯蓝色；
}

代码质量


视觉设计


堆栈经验

我认为您应该只使用引导而不是任何额外样式来解决问题，但我不使用BS 4，我刚刚解决了您的负边距和bgc透明的问题。请看：

.tabs{
显示：内联块；
边框：1px实心#ECECEC；
边界半径：6px；
边缘底部：1.85714286em；
背景色：透明；
填充：0；
}
.tabs li:未启用（.active）{
背景色：#fff！重要；
不透明度：1；
}
.tabs li.active{
背景色：红色；
左边距：-4px；
}
.tabs>li{
显示：内联块；
不透明度：.5；
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.tabs>.active，
.选项卡：悬停{
不透明度：1；
}
.tabs-container.tabs--vertical.tabs li:非（：最后一个子项）{
边界权：无；
边框底部：1px实心#ECECEC；
}
李先生{
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
填充：0.92857143em 1.85714286em；
}
.tabs li:不是（：最后一个孩子）{
右边框：1px纯蓝色；
}

代码质量


视觉设计


堆栈经验

我认为您应该只使用引导而不是任何额外样式来解决问题，但我不使用BS 4，我刚刚解决了您的负边距和bgc透明的问题。请看：

.tabs{
显示：内联块；
边框：1px实心#ECECEC；
边界半径：6px；
边缘底部：1.85714286em；
背景色：透明；
填充：0；
}
.tabs li:未启用（.active）{
背景色：#fff！重要；
不透明度：1；
}
.tabs li.active{
背景色：红色；
左边距：-4px；
}
.tabs>li{
显示：内联块；
不透明度：.5；
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.tabs>.active，
.选项卡：悬停{
不透明度：1；
}
.tabs-container.tabs--vertical.tabs li:非（：最后一个子项）{
边界权：无；
边框底部：1px实心#ECECEC；
}
李先生{
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
填充：0.92857143em 1.85714286em；
}
.tabs li:不是（：最后一个孩子）{
右边框：1px纯蓝色；
}

代码质量


视觉设计


堆栈经验

将

显示：内联块

更改为

浮动：左

添加了

列表样式

为

无

现在只看到边框：蓝色

.tabs>li{
浮动：左；
不透明度：.5；
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
列表样式类型：无；
}

.tabs{
显示：内联块；
边框：1px实心#ECECEC；
边界半径：6px；
边缘底部：1.85714286em；
背景颜色：绿色；
填充：0；
}
.tabs li:未启用（.active）{
背景色：#fff！重要；
不透明度：1；
}
.tabs li.active{
背景色：红色；
}
.tabs>li{
浮动：左；
不透明度：.5；
过渡：0.3s；
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无