導航欄中的Bootstrap 4 Center搜索欄

Question

我正在嘗試將導航欄置於導航欄中。 目前，我將其向左對齊，但是我試圖將其放置在導航欄的中間。 這是我擁有的HTML代碼：

 <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> 

我無法使搜索欄居中。 我也無法在引導網站上找到它，因為它非常模糊

Answer 1

將ml-auto類和mr-auto一起添加到navbar-nav

Answer 2

您可以通過向導航欄添加mr-auto以使搜索欄位於導航欄的中央來添加margin-left：auto 。 但這不會位於標題的中心，因為導航欄旁邊還有另一個組件。

<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>