Kalas Yagami Kalas Yagami - 3 months ago 22
HTML Question

Bootstrap-4 no padding nav

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


Here's my code

The problem is that there's no padding, is it normal ? Here's a picture of what it renders :

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

Other problem is that it can display you 2 links on the same line :/

Answer

I fail to make your dropdown work, but you can add some padding to your a elements like this:

In HTML:

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

In CSS:

.pad15 {
    padding: 15px;
}

It is very simple, but I guess it is what you are looking for.


UPDATE: Without CSS file

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