Brunaine Brunaine - 2 months ago 6
PHP Question

Bootstrap Menu Dropwon <li> goes to the right

So i want the list of the dropdown to be in the same line I don't know why it goes to the right

Bug Drop Down

enter image description here



<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Admin
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Mensagens</a>
</li>
<li><a href="#">Suporte</a>
</li>
<li><a href='corpo.php?option=LOGOFF'>Logoff</a>
</li>
</ul>




Answer

Its with CSS of the anchor tags in the list item of dropdown menu.

It is set it the following by default:

.dropdown-menu > li > a {
  padding: 3px 20px;
}

If you change the padding to 12px , it directly aligns with the dropdown button text.

.dropdown-menu > li > a {
  padding: 3px 12px;
}

.dropdown-menu{
 min-width:120px;
 }

That is same as the default padding for the btn class. This should fix the shift. Also changing min-width property as your list items are declared to be inline.

Comments