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

Bootstrap - itemki się wyśrodkowują, jak zmusić do ich pozycjonowania?

VPS Starter Arubacloud
0 głosów
252 wizyt
pytanie zadane 15 grudnia 2018 w HTML i CSS przez Q7V Gaduła (4,250 p.)

Cześć, mam takiego navbara:


    <!-- NAVBAR -->


    <nav class="navbar navbg navbar-dark">
     <!-- Brand -->
     <a class="navbar-brand" href="#">Spaceshop</a>
     <form>
         <input type="text" class="search" placeholder="Search">
     </form>
     <!-- Toggler/collapsibe Button -->
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
       <span class="navbar-toggler-icon"></span>
     </button>
     <!-- Navbar links -->
     <div class="collapse navbar-collapse" id="collapsibleNavbar">

       <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link" href="#">Kontakt</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Sposoby płatności</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Wysyłka</a>
         </li>
       </ul>
     </div>
   </nav>


  <!-- NAVBAR END -->

Efekt jest taki:

Przepraszam za jakość, ale głównie chodzi o to, że itemki się ustawiają w równej odległości od siebie przez atrybut:

justify-content: space-between;

Który jest w selektorze navbar. Próbowałem stworzyć diva i dać text-align: right, jednak navbar wtedy robi się większy na wysokość. No nie mam kompletnie pomysłu jak umieścić wyszukiwarkę i button po prawej, a navbar-brand po lewej.

1 odpowiedź

+1 głos
odpowiedź 15 grudnia 2018 przez arces Pasjonat (17,700 p.)
Daj wyszukiwarkę i button w DIV, a navbar-brand zostaw tak jak jest. Powinno się ustawić jak chcesz.
komentarz 15 grudnia 2018 przez Q7V Gaduła (4,250 p.)

No jest spoko, tylko ten efekt o którym napisałem^^ Przycisk ląduję pod wyszukiwarką, a ja chciałem aby były obok siebie. Dziwne :D

komentarz 15 grudnia 2018 przez arces Pasjonat (17,700 p.)
Dajesz na DIVa, którego dodałeś klasę z flexem i po problemie ;)
komentarz 15 grudnia 2018 przez Q7V Gaduła (4,250 p.)
Nie rozumiem :P
komentarz 15 grudnia 2018 przez arces Pasjonat (17,700 p.)
W bootstrapie jest klasa, która nadaje elementowi właściwości flexboxa. Nazywa się chyba d-flex z tego co pamiętam. Jak jej użyjesz to elementy powinny być obok siebie. Dajesz tę klasę na DIVa, w którym jest przycisk i wyszukiwarka.
komentarz 15 grudnia 2018 przez Q7V Gaduła (4,250 p.)
A no, dzięki działa. :D

Podobne pytania

0 głosów
2 odpowiedzi 375 wizyt
+1 głos
2 odpowiedzi 156 wizyt
0 głosów
1 odpowiedź 216 wizyt

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...