Bootstrap-4 keine Polsterung nav

Question

<ul class="nav navbar-nav"> 
     <li class="nav-item-dropdown"> 
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
       SLIDES 
      </a> 
      <div class="dropdown-menu" aria-labelledby="Preview"> 
       <a class="dropdown-item" href="#">Événements Importants</a> 
       <a class="dropdown-item" href="#">Rappels des bonnes pratiques</a> 
       <a class="dropdown-item" href="#">Ecran Sonar</a> 
      </div> 
     </li> 
     <li class="nav-item-dropdown"> 
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
       BANDEAU 
      </a> 
      <div class="dropdown-menu" aria-labelledby="Preview"> 
       <a class="dropdown-item" href="#">Rappel CRA</a> 
       <a class="dropdown-item" href="#">Visite Client</a> 
       <a class="dropdown-item" href="#">Nouvelle version</a> 
      </div> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">POP-UP</a> 
     </li> 
    </ul> 

Hier ist mein Code

Das Problem ist, dass es keine Polsterung ist, ist es normal? Hier ist ein Bild von dem, was er macht:

http://img4.hostingpics.net/pics/248061Screenshotfrom20160804155752.png

Andere Problem ist, dass es zwei Links auf der gleichen Zeile angezeigt werden kann:/

Answer 1

ich nicht Ihre Drop-Down-Arbeit machen, aber Sie können einige hinzufügen Polsterung auf Ihre a Elemente wie folgt aus:

In HTML:

... 
<a class="dropdown-item pad15" href="#">Événements Importants</a> 
... 

In CSS:

.pad15 { 
    padding: 15px; 
} 

---

Es ist sehr einfach, aber ich denke, es ist das, was Sie suchen.

---

UPDATE: Ohne CSS-Datei

... 
<a class="dropdown-item" style="padding:15px;" href="#">Événements Importants</a> 
...