Question

我在导航栏中的搜索栏中有以下代码。它在Firefox中很好看，但在谷歌浏览器上，搜索栏延伸并低于导航。我该如何解决这个问题？

    <div class = "navbar navbar-inverse navbar-fixed-top">
        <div class = "navbar-inner">
            <div class = "container">
                <a href = "#" class = "navbar-brand">SIG Inventory System</a>
                <div class="navbar-header">
                    <button type='button' class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                </div>
                <div class = "collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav ">
                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">About</a></li>
                    </ul>

                    <form class="navbar-form navbar-right" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm " placeholder="Search..." name="srch-term" id="srch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>
                    </form>

                    <!--<form class="nav navbar-form navbar-right" role="search">
                      <div class="form-group ">
                        <input class="form-control input-sm " placeholder="Search..." type="text">
                      </div>
                      <button type="submit" class="btn btn-danger btn-sm">
                        <span class="fa fa-search"></span>
                      </button>
                    </form>-->
                </div>
            </div>
        </div>
    </div>

Answer 1

我在bootstrap 3中遇到了同样的问题，标记非常相似。尝试将此添加到您的覆盖CSS，它将解决最终问题但不幸的是并没有解决实际问题。我还没到那么远。

nav .navbar-form {max-width: 300px}

修改

显然这是一个更优雅的修复。

.navbar-form .input-group-btn, .navbar-form .input-group-addon { width: auto; }

然而，我决定：

.navbar-form .input-group-btn, .navbar-form input { width: auto; }

请参阅https://github.com/twbs/bootstrap/issues/9950

导航栏中的搜索栏在Google Chrome和Firefox中看起来不一样

1 个答案: