如何定位導航欄中的導航欄內容4

我正在學習導航欄4導航欄，但我無法清楚地知道如何在導航欄中定位對象我想將搜索框放置在導航欄的中心並在右側放置按鈕，但我只能做到這一點，導航欄不在中心對齊。如何定位導航欄中的導航欄內容4

 <div class="collapse navbar-collapse text-xs-center" id="mynavbar"> 

     <div class="col-lg-4 form-inline navbar-form"> 
      <div class="input-group"> 
       <form class="form-inline my-lg-0"> 
        <input class="form-control " type="text" placeholder="Search"> 
        <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button> 
       </form> 

      </div> 
     </div> 

     <ul class="navbar-nav w-100 justify-content-end"> 

      <li class="nav-item" style="margin-right: 15px;"> 
       <div class="btn-group"> 
        <a class="btn nav-link dropdown-toggle" data-toggle="dropdown" 
         href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
         <i class="fa fa-plus" aria-hidden="true"></i> 
        </a> 
        <div class="dropdown-menu dropdown-menu-right"> 
         <a class="dropdown-item" href="#">Action</a> <a 
          class="dropdown-item" href="#">Another action</a> <a 
          class="dropdown-item" href="#">Something else here</a> 
        </div> 
       </div> 
      </li> 
      </ul> 
     </div>

來源

2017-04-02 Jeevansai Jinne

有用於引導導航欄的取向不同方法4.一種方法是在內容中心（形式）使用mx-auto ...

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded"> 
    <div class="navbar-collapse collapse" id="mynavbar"> 
     <form class="form-inline mx-auto"> 
      <div class="input-group my-lg-0"> 
       <input class="form-control " type="text" placeholder="Search"> 
       <span class="input-group-btn"> 
       <button class="btn" type="submit">Search</button> 
       </span> 
      </div> 
     </form> 
     <ul class="navbar-nav"> 
      <li class="nav-item"> 
       <div class="btn-group"> 
        <a class="btn nav-link dropdown-toggle" data-toggle="dropdown" 
         href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
         <i class="fa fa-plus" aria-hidden="true"></i> 
        </a> 
        <div class="dropdown-menu dropdown-menu-right"> 
         <a class="dropdown-item" href="#">Action</a> <a 
          class="dropdown-item" href="#">Another action</a> <a 
          class="dropdown-item" href="#">Something else here</a> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </div> 
</nav>

但搜索表單將不完全居中，因爲左側沒有內容，表單將被右側的按鈕稍微向左推。

因此，在這種情況下，我建議使用Flexbox的實用工具類 ..

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded"> 
    <div class="navbar-collapse collapse" id="mynavbar"> 
     <span class="navbar-text w-100"> </span> 
     <form class="form-inline w-100 justify-content-center"> 
      <div class="input-group my-lg-0"> 
       <input class="form-control " type="text" placeholder="Search"> 
       <span class="input-group-btn"> 
       <button class="btn" type="submit">Search</button> 
       </span> 
      </div> 
     </form> 
     <ul class="navbar-nav w-100 justify-content-end"> 
      <li class="nav-item"> 
       <div class="btn-group"> 
        <a class="btn nav-link dropdown-toggle" data-toggle="dropdown" 
         href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
         <i class="fa fa-plus" aria-hidden="true"></i> 
        </a> 
        <div class="dropdown-menu dropdown-menu-right"> 
         <a class="dropdown-item" href="#">Action</a> <a 
          class="dropdown-item" href="#">Another action</a> <a 
          class="dropdown-item" href="#">Something else here</a> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </div> 
</nav>

Demo of both centering methods

來源

2017-04-02 13:37:19 ZimSystem

如何定位導航欄中的導航欄內容4

回答

相關問題