Question

我在以下情况下挣扎。我在一个有一些菜单项的网站上工作。所有项目都正确显示，在我的collasped窗口中显示搜索栏。如果超出特殊宽度，条形图会改变它们的样式（位置并在顶部和底部有一些边框 - 见图3），我不知道为什么会发生这种情况。我尝试了不同的例子，但我没有得到它。任何帮助和解释为什么会发生这种情况会很好。我的解决方案看起来像我的第二张图片。

IMAGE1：

图像2：

的Image3：

小提琴：http://jsfiddle.net/bdd9U/1323/

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
</div> <!-- End Navbar Header -->
<div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav navbar-right" style="padding-right: 20px">
        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> Item1</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> Item2</a></li>
    </ul>
        <form class="navbar-form navbar-right" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder=""/>
                <div class="input-group-btn">
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                </div>
            </div>
        </form>
</div><!-- End Navbar Collapse -->

CSS：

@media (max-width: 820px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-form {
        width: auto;
        position: relative;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 0px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Answer 1

问题是 .navbar-form

类的样式 -webkit-box-shadow

.navbar-form {
    padding: 10px 15px;
    margin-top: 8px;
    margin-right: -15px;
    margin-bottom: 8px;
    margin-left: -15px;
    /* border-top: 1px solid transparent; */
    /* border-bottom: 1px solid transparent; */
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
    /* box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1); */
}

对于具有最小宽度的媒体查询：768px：

，它与同一类不同

@media (min-width: 768px)
.navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

所以你可以将它添加到你的css文件中（没有媒体查询）：

.navbar-form {
    -webkit-box-shadow: none !important;
}

Answer 2

好的，我解决了。问题是我的媒体查询的最大宽度。我认为不受控制的行为是因为引导程序大小的标准宽度（768px）和我自定义的820px宽度。

CSS：

<input type="button" value="" onclick="Blabla()" />

折叠表单控件正在调整大小时更改其属性

2 个答案: