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に似ています。