引导3:仅在较小的屏幕尺寸上推/拉列 [英] Bootstrap 3: Push/pull columns only on smaller screen sizes
本文介绍了引导3:仅在较小的屏幕尺寸上推/拉列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在页面上有以下布局:
I have the following layout on a page:
<div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div>
--------- ----- ----- ----- ---------
| 1 | 2 | 3 | 4 | 5 |
--------- ----- ----- ----- ---------
但是在较小的屏幕尺寸上,我想要以下布局:
But on smaller screen sizes I would like the following layout:
<div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>
----------------- -----------------
| 1 | 5 |
----------------- -----------------
| 2 | 3 | 4 |
----------- ----------- -----------
(请注意重新排列列顺序。)只能在较小的屏幕尺寸上推/拉列吗?我试过以下,但我得到最奇怪的布局,似乎失去了< div> 5< / div>
完全...:
(Note the re-arranging of the column order.) Is it possible to push/pull columns only on smaller screen sizes? I've tried the following, but I get the oddest layout, and seem to lose <div>5</div>
completely...:
<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4>3</div>
<div class="col-lg-2 col-xs-4>4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>
推荐答案
自己回答,只是想:
<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>
按照我想在平板电脑上的顺序先将它们排序,然后将它们推入/桌面。
Get them in the order I want on the tablet first, then push/pull them in to position on the desktop.
这篇关于引导3:仅在较小的屏幕尺寸上推/拉列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文