ブートストラップ4 - Navbar searchbar center

現在、私はナビ内の検索バーのセンタリングに少し苦労しています。私はmr-atuoとml-autoまたはmx-autoのような多くの異なるものを試しましたが、移動する要素を取得できません。個々のピクセルを使用したくないのは、モバイルでは恐ろしいように見えるからです。ここでバーがする必要がある場合、それが現在どこの小さなデモされていますhttps://imgur.com/a/bHXJD ブートストラップ4 - Navbar searchbar center

ここでは私のナビゲーションバーのコードは次のとおりです。事前に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="nl"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <script src="https://use.fontawesome.com/0ba2bca7b4.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom z-depth-half"> 
 
    <div class="container"> 
 

 
     <a class="navbar-brand" href="#"> 
 
     <i class="fa fa-skype"></i> 
 
     </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"> 
 
      <a href="#" class="nav-link">Vragen</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#" class="nav-link">Aanbieders</a> 
 
      </li> 
 
     </ul> 
 

 

 
     <ul class="navbar-nav"> 
 
      <li class="nav-item" style="border-right: 0.1rem solid lightgrey"> 
 
      <form class="form-inline"> 
 
       <input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search"> 
 
       <button class="btn btn-search my-2 my-sm-0 " type="submit"> 
 
       <i class="fa fa-search"></i> 
 
       </button> 
 
      </form> 
 

 
      </li> 
 

 

 

 
      <li class="nav-item"> 
 
      <a class="nav-link" href="">Aanmelden</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link btn nav-register-btn" href="">Registreren</a> 
 
      </li> 
 

 
     
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</body> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</html>

ありがとう！

出典

2017-11-05 Rainier laan

あなたのHTML構造ビットを変更する必要があります。 UL

HTMLの外のフォームを移動：

... 

</ul> 

<form class="form-inline"> 
    <input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search"> 
    <button class="btn btn-search my-2 my-sm-0 " type="submit"> 
     <i class="fa fa-search"></i> 
    </button> 
</form> 


<ul class="navbar-nav"> 

...

CSS：

.form-inline{ 
    width: 100%; 
    display: flex; 
    justify-content: center; 
} 

.form-inline #search{ 
    width: 50%; 
}

JsFiddle

出典

2017-11-05 13:54:02 user3284463

おかげで、私はそれが今動いてました、しかし、それは、幅が100％です。私は幅を50％にしてナビバーの中心に合わせる方法を理解できません。それは可能ですか？ –

@ Feudelcosine148私は自分の答えを更新しました – user3284463

何らかの理由で私のために働きません。パーセンテージは動作しますが、私が '！important.'を行っても、正当化クラスの背後にはまだ動作しません。あなたはその問題を知っていますか？ –

一つの解決策は、あなたの.form-inlineに最小幅を割り当て、.search-inputがフレックスボックスと一緒に成長できるように、次のようになります。

.form-inline { 
    min-width: 500px; 
} 
.search-input { 
    flex-grow: 3; 
}

codepen

出典

2017-11-05 13:15:22

ブートストラップ4 - Navbar searchbar center

答えて

関連する問題