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丸頂部的空間？

回答

相關問題