引导导航栏扩展时窗口得到当窗口获取到手机的大小更小

Question

Regular

Smaller

我的引导3.0导航栏扩展。我已经包含了上述两个视图的图片以及问题所在。

我想让我的导航栏在屏幕变小并覆盖部分页面时不展开。

它可能与搜索栏及其附近的按钮有关。我设法让搜索表单在扩展到整个侧边栏后面的整个屏幕时保持相同的大小。

任何帮助将是伟大的。

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; 
} 

在你的样式表中。我希望这是你所期望的。 :)