在学习Twitter Bootstrap 3创建响应式网页时,我遇到了一个问题:
如何将元素从一行移到另一行?
我需要像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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句