如何在移动设备上将 div 移动到另一行？答案

【问题标题】：How to move div to another row on mobile?如何在移动设备上将 div 移动到另一行？
【发布时间】：2014-08-20 00:34:20
【问题描述】：

是否可以在引导程序中将 div 从一行移动到另一行？我需要这样的东西：

台式机/平板电脑：

-----------------------------
|Brand               |search|   #row1             
-----------------------------
|Menu:  | MAIN CONTENT      |
|-link 1|                   |   #row2
|-link 2|                   |
|-link 3|                   |
------------------------------

手机：

-----------
|Brand    |    #row1
-----------
|Menu:   =|
|-link 1  |    #row2 (expanding/collapsing navbar with menu and search form)
|-link 2  |
|-link 3  |
| search  |
|         |
| Main    |
| content |    #row2 
| ...     |
| ...     |
-----------

在移动设备上，我需要将搜索表单从 #row1 移动到 #row2 中的折叠菜单。

【问题讨论】：

您要移动搜索吗？
一个选项是复制第 2 行中的搜索区域并使其仅在移动屏幕尺寸上可见。
你可以用jQuery克隆它或者像上面那样做，在侧边栏的那个上使用visible-xs类，在标题的那个上使用hidden-xs。 GetBootstrap.com 进入响应式实用程序部分

标签： html css twitter-bootstrap

【解决方案1】：

很遗憾，没有。正如您目前所拥有的那样，没有办法做到这一点。一种可能的折衷方案是让原始搜索框在特定屏幕尺寸下变得不可见，并使用另一个功能相同的搜索框，在此时您需要它的位置显示。例如：

<div class="row">
    <div class="col-xs-12 col-sm-6">
        Brand
    </div>
    <div class="col-sm-6 hidden-xs">
        <input type="text" class="form-control"/>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-4">
        <ul class="menu">
            <li>
                <a href="link1"></a>
            </li>
            <li>
                <a href="link2"></a>
            </li>
            <li>
                <a href="link3"></a>
            </li>
            <li>
                <a href="link4"></a>
            </li>
        </ul>
        <div class="visible-xs-block">
            <input type="text" class="form-control" />
        </div>
    </div>
    <div class="col-xs-12 col-sm-8">
        <main>Main Content</main>
    </div>
</div>

显然你不想养成这种事情的习惯，但有时最佳布局需要你做这样的事情。

【讨论】：

【解决方案2】：

Gah 在开启赏金任务时失去了所有代表，现在我无法发表评论。开始使用框架会是一个可行的选择吗？不是特别推广任何框架，而是出于您单独描述的原因，我个人开始使用 Zurb Foundation。 http://foundation.zurb.com/

【讨论】：