Bootstrap 4中心搜索欄在導航欄中

我想將我的搜索欄放在導航欄中。目前，我已將它與左側對齊，但我試圖將它放在導航欄中間。這是HTML代碼，我有：Bootstrap 4中心搜索欄在導航欄中

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

我不能讓搜索欄居中。我無法找到它的引導網站或者因爲它很模糊

來源

2017-10-04 Rainier laan

一起加入ml-auto類navbar-nav與mr-auto

來源

2017-10-04 13:21:02

您可以添加保證金左：加入MR-汽車到汽車導航欄將搜索欄放置在導航欄中。但是它不會位於標題的中心，因爲在導航欄旁邊有另一個組件。

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

來源

2017-10-04 13:54:03

Bootstrap 4中心搜索欄在導航欄中

回答

相關問題