Question

当窗口达到移动尺寸时，我的bootstrap 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

添加

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

样式表中的

。我希望这是你所期待的。：）

Answer 2

看起来图标正在搜索栏下方

我稍微使用了你的代码并提出了一个解决方案，但是当屏幕变得非常小（宽度小于250px）时，图标最终会换行

尝试更改此代码：

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

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

Bootstrap Navbar在Window变小时扩展

2 个答案: