Bootstrap丸顶部的空间？

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

.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>

UPDATE：基于以下这个答案是CSS我解决它。

将margin和padding设置为“0”摆脱了空间，但也使其超出了边界。我只是添加了一个小顶部填充，以将它放到需要的位置。

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

来源

2017-02-17 Caverman

检查'ul'。这可能是一个流氓边缘或填充。 – monners

如果找不到解决方案。

试着用这个。

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

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

来源

2017-02-17 04:38:11

谢谢...一些小调整，让我修好了。我在我的问题中发布了我的修复。 – Caverman

<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>

正如你可以从上面的代码看有没有在你的问题中提到与之相关的保证金。

来源

2017-02-17 04:39:44 neophyte

你有更多的CSS？请张贴他们以获得完整的答案。 – neophyte

Bootstrap丸顶部的空间？

回答

相关问题