2017-08-23 20 views
0

私はそれに3つの要素を持つブートストラップv.4のナビゲーションバーを持っています。検索バーがナビゲーションバーの中央にくるように要素が均等に配置されます。崩壊すると全幅になります。私が今持っているブートストラップ4 - 中心の検索フォームを小さな画面で全幅にする

htmlのこの:

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded"> 
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar5"> 
    <span class="navbar-toggler-icon"></span> 
</button> 
<a href="/" class="navbar-brand">Brand</a> 
<div class="navbar-collapse collapse justify-content-stretch" id="navbar5"> 
    <form class="mx-2 my-auto d-inline w-100"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="..."> 
      <span class="input-group-btn"> 
      <button class="btn btn-outline-secondary" type="button">GO</button> 
      </span> 
     </div> 
    </form> 
    <ul class="navbar-nav"> 
     <li class="nav-item dropdown"> 
      <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <i class="ion-ios-gear-outline"></i> 
      </a> 
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> 
       <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> 
     </li> 
    </ul> 
</div> 

ここでの問題は、私はw-100未満のものを持っている場合は、メニューアイコンは、検索バーの隣に引かれていることである、と私はしたいですそれを右隅に置いて、どうすれば修正できますか? 私がしたいことはthisに似ています。

答えて

1

w-100のようなサイジングユーティリティは応答しません。列(例えば。col-md-3)の代わりに幅を設定するには...

https://www.codeply.com/go/FVo4F81ShR

<nav class="navbar navbar-expand-md navbar-light bg-light"> 
    <a href="/" class="navbar-brand">Codeply</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCodeply"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="navbar-collapse collapse" id="navbarCodeply"> 
     <form class="mx-2 my-auto d-inline mx-auto col-md-3"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="..."> 
       <span class="input-group-btn"> 
      <button class="btn btn-outline-secondary" type="button">GO</button> 
      </span> 
      </div> 
     </form> 
     <ul class="navbar-nav"> 
      <li class="nav-item dropdown"> 
       <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        ... 
       </a> 
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> 
        ... 
       </div> 
      </li> 
     </ul> 
    </div> 
</nav> 
を使用します
関連する問題