html - Bootstrap Navbar 在窗口变小时扩展

Question

Regular

Smaller

当窗口达到移动尺寸时，我的 bootstrap 3.0 导航栏会扩展。我已经包含了上面两个 View 的图片以及问题所在。

当屏幕变小并覆盖部分页面时，我试图让我的导航栏不展开。

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

任何帮助都会很棒。

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

这个解决方案并不完美，可以改进(在尝试之前备份你的旧代码)