Bootstrap - dropdown po prawej stronie menu

Question

Witajcie,

Mam problem z nawigacją w Bootstrapie, a dokładnie z dropdown'em. Nadałem mu klasę, żeby znalazł się jako jedyny po prawej stronie, ale to nic nie daje. Szukałem już chyba wszystkich podobnych wątków na różnych forach, w tym na stackoverflow, ale żadne tamtejsze rozwiązanie nie pomogło...

Oto mój kod:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a href="#" class="navbar-brand mr-5">Brand</a>
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navMenu">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                First
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                Second
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                Third
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                Name
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Logout</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

 

Proszę o pomoc,
Pozdrawiam!

Answer 1

Żeby pozbyć się przylegania do lewej należy ustawić

.nav-item.dropdown{
            margin-left: auto;
        }

Ale to nie wystarczy w tym przypadku ponieważ navbar-nav nie ma ustawionej szerokości i nie ma miejsca na odsunięcie nav-item. Dlatego należy jeszcze dodać szerokość do navbar-nav.

.navbar-nav{
            width: 100%;
        }

Przy okazji popsuje się nawigacja na mobilki, dlatego należy usunąć te style w media queries.

Comments

You are a Genius!!! Dziękuję bardzo za pomoc :)
Pozdrawiam!

Answer 2

WYSTARCZY

<div class='flot-right'></div>

 

Comments

Niestety, nie pomogło