Bootstrap 3 Grid:在行之间移动元素 [英] Bootstrap 3 Grid: Move elements between rows

查看：41
本文介绍了Bootstrap 3 Grid:在行之间移动元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在学习 Twitter Bootstrap 3 以创建响应式网页时，我遇到了一个问题:
如何将元素从一行向上移动到另一行?
我需要像 col-md-push/col-md-pull 这样的东西，但需要垂直方向.

例如，在桌面屏幕元素 D 在第二行，但在平板电脑上它应该在第一行:

桌面:
|一个 |乙 |C |
|D |E |F |

平板电脑:
|一个 |D |
|乙 |C |
|E |F |

电话:
|一个 |
|D |
|乙 |
|E |
|C |
|F |

提前致谢！

解决方案

找到使用嵌套列的解决方案.A 和 D 元素被分组在一个列中.在桌面屏幕 (col-md) 上，它们各占 12 列，因此 D 位于 A 下方.在平板电脑屏幕 (col-sm) 上，A 和 D 的大小相等 (6)，因此它们可以排成一行.

完整代码:http://jsfiddle.net/UNs25/1/

<div class="row"><div class="col-md-4 col-sm-12"><div class="row"><div class="col-md-12 col-sm-6"><input type="text" class="form-control" placeholder="A">
<div class="col-md-12 col-sm-6"><input type="text" class="form-control" placeholder="D">

<div class="col-md-4 col-sm-6"><input type="text" class="form-control" placeholder="B"><input type="text" class="form-control" placeholder="E">

<div class="col-md-4 col-sm-6"><input type="text" class="form-control" placeholder="C"><input type="text" class="form-control" placeholder="F">

While learning Twitter Bootstrap 3 to create responsive web pages I faced a problem:
How to move element up from one row to another?
I need something like col-md-push / col-md-pull but for vertical direction.

For example, on desktop screen element D is in second row, but on tablet it should be in first one:

Desktop:
| A | B | C |
| D | E | F |

Tablet:
| A | D |
| B | C |
| E | F |

Phone:
| A |
| D |
| B |
| E |
| C |
| F |

Thanks in advance!

解决方案

Found the solution using nested columns. A and D elements are grouped in one column. On desktop screen (col-md) they occupy 12 columns each, so that D is placed below A. On tablet screen (col-sm) A and D are equal size (6) so that they fit in one row.

Complete code: http://jsfiddle.net/UNs25/1/

<div class="container">
    <div class="row">       

        <div class="col-md-4 col-sm-12">
            <div class="row">
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="A">
                </div>
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="D">
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="B">
            <input type="text" class="form-control" placeholder="E">            
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="C">
            <input type="text" class="form-control" placeholder="F">            
        </div>      

    </div>      
</div>

这篇关于Bootstrap 3 Grid:在行之间移动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆