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

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ź

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.