html - Bootstrap 类 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 来调试您的代码。