• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyśrodkowanie navbara w Bootstrapie

Object Storage Arubacloud
0 głosów
285 wizyt
pytanie zadane 20 października 2018 w HTML i CSS przez yato_ Początkujący (350 p.)

Cześć, stworzyłem navbara według filmu MZ i mam problem z wyśrodkowaniem jego elementów. Chcę żeby logo i menu było na samym środku strony zawsze, ale jak dodaję klasę justify-content-center to wyśrodkowuje się tylko w przypadku gdy ekran jest mniejszy od md

    <header>
        <nav class="navbar bg-dark navbar-dark navbar-expand-md">
            <div class="container-fluid justify-content-center">
                <a href="#" class="navbar-brand">
                <img src="img/logo_dark.svg" width=250 alt="#" class="d-inline-block mt-auto align-bottom">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- justify-content-end -->
                <div class="collapse navbar-collapse" id="mainmenu">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">START</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">JAK KUPOWAĆ?</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" href="#">CENNIKI</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">CENNIK1</a>
                                <a class="dropdown-item" href="#">CENNIK2</a>
                                <a class="dropdown-item" href="#">CENNIK3</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">REGULAMIN</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">KONTAKT</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

 

1 odpowiedź

+1 głos
odpowiedź 20 października 2018 przez arces Pasjonat (17,700 p.)
wybrane 20 października 2018 przez yato_
 
Najlepsza
Klasa .navbar-collapse ma ustawioną właściwość flex-grow: 1 i dlatego zajmuje więcej miejsca niż tylko tyle ile potrzebuje. Dlatego też nie masz centrowanego menu i logo. Zmień flex-grow dla tej klasy na 0 i będzie wszystko okej.

Podobne pytania

0 głosów
1 odpowiedź 285 wizyt
pytanie zadane 20 maja 2019 w HTML i CSS przez Moras Obywatel (1,620 p.)
0 głosów
1 odpowiedź 152 wizyt
pytanie zadane 9 października 2016 w HTML i CSS przez Sebastian Westfal Obywatel (1,020 p.)
0 głosów
0 odpowiedzi 139 wizyt
pytanie zadane 17 września 2016 w HTML i CSS przez Adam Ostrogórski Obywatel (1,070 p.)

92,558 zapytań

141,407 odpowiedzi

319,569 komentarzy

61,945 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...