Question

我正在使用Bootstrap并且导航栏出现问题。在我的导航栏中，我有几个div，我想成为导航栏的全高，但导航栏似乎总是比内部的div高一点。我认为这是由于导航栏上的某些填充，但我找不到它。看看这个jsFiddle：

注意三个.rhombus div。它们应该是导航栏的整个高度，但它们下方有5个像素的额外空间。如果我让菱形div高5像素，导航栏就会延伸。

我确信这很简单我不会错过，但我无法发现它。

Answer 1

我不会尝试编辑bootstrap navbar 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，所以可能也会使你的相同高度是避免编辑这些默认值的好计划。

删除bootstrap静态导航栏底部不需要的填充

3 个答案: