2017-10-25 7 views
1

nav-barに右浮動検索ボックスを実装しようとしていますが、ブラウザウィンドウのサイズを変更すると、検索ボックスが1行下にジャンプします。私はそれが右にとどまり、一列下を飛び越えないようにしたい。どうやってやるの?これは私のnavbar-codeです:ブートストラップnavbarの検索ボックスが1行下にジャンプ

<nav class="navbar navbar-expand-lg navmenu justify-content-between"> 
    <a class="navbar-brand themefont" href="/">Försvarshögskolan</a> 
    <div class="input-group justify-content-end"> 
     <form name="form" class="form-inline" ng-submit="vm.anonymousSearch()" role="form"> 
      <input type="text" class="form-control" placeholder="Svara anonymt med pin..." name="search" id="search" ng-model="vm.search.input" style="background-color: rgba(255, 255, 255, 0.2); color: lightgrey; border-color: grey;"> 
      <span class="input-group-btn"> 
       <button class="btn btn-outline-secondary anonymous-search" type="submit">Sök</button> 
      </span> 
     </form> 
    </div> 
</nav> 

答えて

1

ジャンピングダウンは応答崩壊によるものです。クラスnavbar-expand-lgの場合、サイズ変更されたブラウザウィンドウの幅が992ピクセル未満の場合(-lgという接尾辞が付いているため)、このような応答の崩壊が発生します。検索ボックスが右に常にとどまるようnavbar-expandに言及したクラスを変更します。完璧に動作

<nav class="navbar navbar-expand navmenu justify-content-between"> 
+0

は、どうもありがとうございました! – danielo

関連する問題