Bootstrap Pillen Platz an der Spitze?

Ich benutze Bootstrap Pillen für ein Menü und es gibt einen Platz an der Spitze. Ich habe bereits Abstand für die <li> entfernt, aber ich weiß nicht, wie man den Raum an der Spitze der allerersten <li> loswerden.Bootstrap Pillen Platz an der Spitze?

.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: auf der Grundlage der Antwort unten ist dies die CSS ich es zu beheben.

Die Einstellung von "margin" und "padding" auf "0" löste den Platz, aber er ließ ihn auch über die Grenze hinausgehen. Ich habe gerade eine kleine obere Polsterung hinzugefügt, um es dahin zu bringen, wo es sein musste.

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

Quelle

2017-02-17 Caverman

überprüfen Sie die "ul". Es ist wahrscheinlich ein Rogue Margin oder Padding. – monners

Wenn Sie keine Lösung finden können.

Versuchen Sie, dies zu verwenden.

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

Dadurch können Sie unnötige Leerzeichen entfernen. Ich benutze einfach !important, weil ich nicht den Hauptpfad des Elements ul kenne.

Quelle

2017-02-17 04:38:11

Danke ... ein paar kleinere Verbesserungen, die mich dazu brachten, mich zu reparieren. Ich habe meinen Fehler in meiner Frage gepostet. – 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>

Wie Sie aus dem obigen Schnipsel sehen kann, gibt es keinen Spielraum mit ihm verbunden, wie in Ihrer Frage erwähnt.

Quelle

2017-02-17 04:39:44 neophyte

Haben Sie mehr CSS? Bitte posten Sie sie, um eine vollständige Antwort zu erhalten. – neophyte

Bootstrap Pillen Platz an der Spitze?

Antwort

Verwandte Themen