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。

将边距和填充设置为“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元素的主要路径。

Answer 2

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
              .nav-pills > li > a 
    { 
        margin-top: -4px; 
        margin-bottom: -1px; 
    }

    .HomePageMenuContainer
    {    
        background-color: #272b30;  
        border-radius: 8px; 
        border: 5px solid lightgray;  
        padding: 1px;
    }

           </style>
           </head>
           <body>
           <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>

           </body>
           </html>

正如您在上述代码段中所看到的那样，您的问题中没有与之相关的保证金。

顶部的Bootstrap Pills空间？

2 个答案: