ブートストラップナビゲーションバーは、ウィンドウを小さく

Question

Regular

Smaller

を取得したときに、ウィンドウがモバイルサイズになったときに私のブートストラップ3.0ナビゲーションバーが拡大展開します。上記の2つのビューの写真と問題のある箇所を示しました。

画面が小さくなり、ページの一部をカバーするときに、ナビゲーションバーを展開しないようにしようとしています。

検索バーとそれに近いボタンとは関係があります。前にサイドバーの後ろの画面全体に広がったときに、検索フォームを同じサイズに保つことができました。

助けがあれば助かります。

HTML

`

 <a class="navbar-brand" style="margin-left: -20px">GCImage</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="navbar-right"> 
     <form class="navbar-form" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search" align="right" ng-model="nav.keyword" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus"> 
      </div> 
      <button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus"> 
       <i class="fa fa-search"></i> 
      </button> 
      <a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a> 
     </form> 
    </div> 
</div> 

`

CSS

.panel-green { 
    border-color: #5cb85c; 
    background-color: #5cb85c; 
    color: #ffffff; 
} 

.panel-orange { 
    border-color: #ff7e47; 
    background-color: #ff7e47; 
    color: #ffffff; 
} 

.shadow { 
    -moz-box-shadow: 1px 1px 2px 3px #ccc; 
    -webkit-box-shadow: 1px 1px 2px 3px #ccc; 
    box-shadow: 1px 1px 2px 3px #ccc; 
} 

.panel-footer { 
    color: #000000; 
} 

.btn-file { 
    position: relative; 
    overflow: hidden; 
} 
.btn-file input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    outline: none; 
    background: white; 
    cursor: inherit; 
    display: block; 
} 
.body{ 
    margin-left:175px 
} 

    .navbar .navbar-form{ 
     padding: 0 15px; 
     border: 0; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
} 
.box{ 
border-radius:0; 
} 



.navbar-collapse.collapse{ 
    display: block !important; 
} 

.navbar-nav>li, .navbar-nav{ 
    float: left !important; 
} 

.navbar-nav.navbar-right:last-child{ 
    margin-right: -15px !important; 
} 

.navbar-right{ 
    float: right !important; 
} 

Answer 1

それは、私はあなたのコードを少しいじっと解決策を考え出した、画面は本当に小さななったときただし、アイコンは、最終的により（小さいラップに見えます250ピクセル幅）

このコードを変更してみてください：このコードに

<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus"> 
<i class="fa fa-search"></i> 
</button> 
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a> 

：

<div class="icons"> 
<ul class="icon-list"> 
<li class="icon"> 
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus"> 
<i class="fa fa-search"></i> 
</button> 
</li> 
<li class="icon"> 
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a> 
</li> 
</ul> 
</div> 

そして、あなたのスタイルシートにこれを追加します。

.icons { 
float: right; 
} 

ul.icon-list { 
padding: 0px; 
margin: 0px 0px 0px 4px; 
} 

li.icon { 
display: inline; 
list-style: none; 
} 

.form-group { 
display: inline-block !important; 
} 

をこのソリューションは完璧ではなく、改善することができる（これを試みる前に、あなたの古いコードのバックアップを作成する）

Answer 2

だけ追加

あなたのスタイルシートの

.navbar-header{ 
    display: inline-block; or display: inline-block!important; 
} 

私はこれがあなたが期待しているものだと願っていますアイコンが検索バー

の下にラップされているように:)