引导类chrome浏览器兼容性中的宽度很重要

Question

问题是Google Chrome浏览器在新行显示搜索框，而Mozilla firefox正确显示为内联。我想使用bootstrap类解决问题 任何人都可以帮我解决代码中的这个问题

<div class="navbar-collapse collapse4">
        <form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
                    <div class="input-group">
                    <input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
                    <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
                    </div>

        </form>
    </div>

Answer 1

问题是您将搜索框添加到导航栏但不要这样做：

<div class="navbar-collapse collapse4">
        <form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
                    <div class="input-group">
                    <input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
                    <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
                    </div>

        </form>
    </div>

请改为：

<div class="col-sm-4">
        <form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
                    <div class="input-group">
                    <input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
                    <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
                    </div>

        </form>
    </div>

提示：您始终可以在chrome中使用Inspect element来调试代码。