css - Bootstrap Pills 空间在顶部？

Question

我正在使用 Bootstrap Pills 作为菜单，顶部有一个空间。我已经为 <li> 删除了间距但我不知道如何摆脱第一个 <li> 顶部的空间.

   .nav-pills > li > a 
    { 
        margin-top: -4px; 
        margin-bottom: -1px; 
    }

    .HomePageMenuContainer
    {    
        background-color: #272b30;  
        border-radius: 8px; 
        border: 5px solid lightgray;  
        padding: 1px;
    }


<div class="HomePageMenuContainer voffset2">
    <ul class="nav nav-pills nav-stacked voffset3">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Collision Repair</a></li>
        <li><a href="#">Classic Restoration</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Testimonial</a></li>
        <li><a href="#">Our Shop</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

更新:根据下面的答案，这是我要修复它的 CSS。

将 margin 和 padding 都设置为“0”可以消除空格，但也会使其超出边框。我只是添加了一点顶部填充以将其降低到需要的位置。

ul.nav.nav-pills.nav-stacked {
  margin: 0 !important;
  padding-top: 3px !important;
}

Answer 1

如果找不到解决方案。

尝试使用它。

ul.nav.nav-pills.nav-stacked.voffset3 {
  margin: 0 !important;
  padding: 0 !important;
}

这将允许您删除不必要的空格。我只是使用 !important 因为我不知道 ul 元素的主要路径。