html - 折叠的表单控件在大小调整期间正在更改其属性

Question

我正在努力应对以下情况。我在一个有一些菜单项的网站上工作。所有元素都正确显示，在我折叠的窗口中显示搜索栏。如果超过了一个特殊的宽度，栏会改变它们的样式(位置并在顶部和底部获得一些边框 - 参见图 3)，我不知道为什么会这样。我尝试了不同的例子，但我不明白。任何帮助和解释为什么会发生这种情况都会很好。我的解决方案应该看起来像我的第二张图片。

图片 1:

图 2:

图 3:

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