在学习Twitter Bootstrap 3来创建响应式网页时,我遇到了一个问题: 如何将元素从一行移动到另一行?我需要像col-md-push / col-md-pull这样的东西,但是需要垂直方向. 例如,在桌面屏幕上元素D在
如何将元素从一行移动到另一行?我需要像col-md-push / col-md-pull这样的东西,但是需要垂直方向.
例如,在桌面屏幕上元素D在第二行,但在平板电脑上它应该在第一行:
桌面:
| A | B | C |
| D | E | F |
片剂:
| A | D |
| B | C |
| E | F |
电话:
| A |
| D |
| B |
| E |
| C |
| F |
提前致谢!
使用嵌套列找到解决方案. A和D元素分组在一列中.在桌面屏幕(col-md)上,它们各占12列,因此D位于A下方.在平板电脑屏幕(col-sm)上,A和D的大小相同(6),以便它们适合一行.完整代码: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>