jquery - 使用特定于移动设备的 twitter bootstrap 调整页面元素位置布局

Question

我正在制作一个在桌面浏览器上看起来像这样的搜索框:

目前在移动浏览器上看起来像这样:

相关 UI 元素的代码如下所示:

<div role="tabpanel" class="tab-pane active" id="adult">
    <h4>Adult tickets</h4>
    <form class="navbar-form" role="search" action="/search" method="get">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for an event" name="q" id="q">
        <div class="input-group-btn">
            <div class="btn-group" role="group">

                <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown" aria-expanded="false">
                    <span data-bind="label">All Adult Categories</span>
                    <input type="hidden" name="category" id="category" value="All Adult Categories">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu menu-scroll" role="menu">
                    <li><a href="#">All Adult Categories</a></li>
                    <% @adultCategories.each do |category| %>
                    <li><a href="#"><%= category.name %></a></li>
                    <% end %>
                </ul>
            </div>
            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
        </div>
    </div>
    </form>
</div>

我需要整理移动浏览器 View 。我认为如果搜索文本框在其自己的行上看起来最好 - 并且在移动设备上使用自己的行，然后类别下拉框可以在正下方的行 右侧带有实际搜索按钮的搜索词框。

基本上将 3 个 UI 元素、搜索文本框、按钮下拉列表和搜索按钮分成两行，第一个搜索词本身，第二行分为类别下拉列表和搜索按钮。我不是特别想调整桌面版本的外观 - 所以有没有一种方法可以使用我为移动设备申请的 CSS 来做到这一点 - 或者我可以在 DOM 中更改一些东西来获得这种行为但离开看起来像桌面版？欢迎任何其他想法

非常感谢!

Answer 1

您需要使用 Bootstrap 的列将搜索框和下拉菜单/按钮分开。这留给 Bootstrap 来决定，如果元素无法适合屏幕，它会将它们堆叠起来。为您的代码做了一个 fiddle -

http://jsfiddle.net/ve1uqmLh/1/

<div role="tabpanel" class="tab-pane active" id="adult">
<h4>Adult tickets</h4>
<form class="navbar-form" role="search" action="/search" method="get">
<div class="input-group row">
    <div class="col-sm-5">
        <input type="text" class="form-control" placeholder="Search for an event" name="q" id="q">
    </div>
    <div class="col-sm-7">
        <div class="input-group-btn">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown" aria-expanded="false">
                    <span data-bind="label">All Adult Categories</span>
                    <input type="hidden" name="category" id="category" value="All Adult Categories">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu menu-scroll" role="menu">
                    <li><a href="#">All Adult Categories</a></li>
                    <% @adultCategories.each do |category| %>
                    <li><a href="#"><%= category.name %></a></li>
                    <% end %>
                </ul>
            </div>
            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
        </div>
     </div>
</div>
</form>