Question

是否可以在bootstrap中将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中的折叠菜单。

Answer 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>

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

Answer 2

Gah失去了我的所有代表打开赏金，现在我无法发表评论。开始使用框架是否可行？不是特别宣传任何框架，但我个人开始使用Zurb Foundation，原因就是你单独描述的原因。 http://foundation.zurb.com/

如何将div移动到移动设备上的另一行？

2 个答案: