Bootstrap 4 Center Suchleiste in Navbar

Question

Ich versuche, meine Suchleiste in meiner Navbar zu zentrieren. Derzeit habe ich es nach links ausgerichtet, aber ich versuche es in der Mitte der Navbar zu bekommen. Dies ist der HTML-Code, den ich habe:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom"> 
 
    <a class="navbar-brand" href="#">ICT-Hulp(Waarschijnelijk logo)</a> 
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
     <ul class="navbar-nav mr-auto"> 
 
      <li class="nav-item"> 
 
       <div class="justify-content-md-center"> 
 
        <form class="form-inline my-2 my-lg-0"> 
 
         <input class="form-control mr-sm-2" type="text" placeholder="Zoeken..." aria-label="Search" style="width: 600px;"> 
 
         
 
         <button class="btn btn-info my-2 my-sm-0" type="submit">Search</button> 
 
        </form> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</nav>

Ich kann die Suchleiste zentriert nicht erhalten. Ich kann es nicht auf der Bootstrap-Website finden, entweder weil seine sehr vage

Answer 1

hinzufügen ml-auto Klasse navbar-nav zusammen mit mr-auto

Answer 2

Sie können margin-left hinzufügen: auto durch Zugabe von mr-Auto-navbar zum Zentrieren der Suchleiste in der Navigationsleiste. Aber es wird nicht in der Mitte des Headers sein, da es eine andere Komponente neben der Navbar ist.

<ul class="navbar-nav mr-auto ml-auto"> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom"> 
 
    <a class="navbar-brand" href="#">ICT-Hulp(Waarschijnelijk logo)</a> 
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
     <ul class="navbar-nav mr-auto ml-auto"> 
 
      <li class="nav-item"> 
 
       <div class="justify-content-md-center"> 
 
        <form class="form-inline my-2 my-lg-0 my-lg-0"> 
 
         <input class="form-control mr-sm-2" type="text" placeholder="Zoeken..." aria-label="Search" style="width: 600px;"> 
 
         
 
         <button class="btn btn-info my-2 my-sm-0" type="submit">Search</button> 
 
        </form> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</nav>