删除引导程序静态导航栏底部不需要的填充

Question

我正在使用Bootstrap，导航栏出现问题。在我的导航栏中，我有几个div，我想成为导航栏的全高，但导航栏似乎总是比里面的div高一点。我想这是因为导航栏上有一些填充物，但我找不到。看看这个jsFiddle:

https://jsfiddle.net/2fax4vme/

注意三个.rhombusdiv。它们应该是导航条的全高，但下面有5个像素的额外空间。如果我让菱形divs高出5个像素，导航栏就会伸展。

我确信这是我没有错过的简单东西，但我就是找不到它。

Answer 1

我不会尝试编辑引导程序导航栏css。相反，你为什么不通过在菱形底部添加负边距（并在高度上额外添加几个像素）来抵消填充呢

       .rhombus{
            height:50px; /* + 5px */
            width: 35px;
            -webkit-transform: skew(-20deg);
            -moz-transform: skew(-20deg);
            -o-transform: skew(-20deg);
            display: inline-block;
            margin:0px;
            padding:0px;
            margin-bottom: -5px; /* counter the padding */
        }

以及更新后的小提琴：https://jsfiddle.net/2fax4vme/2/

Answer 2

将.rhombus的高度更改为height:50px;怎么样。它对我有用。

对于HTML5，还需要为每个Pevara添加margin-bottom:-5px。

Answer 3

测试：https://jsfiddle.net/2fax4vme/3/

.rhombus {
    height: 50px;
}
#navbar {
    line-height: 0;
}

我发现Bootstrap中很少有元素设置为50px，所以可能也将您的元素设置为相同的高度是避免编辑这些默认值的好计划。