Bootstrap 3:仅在较小的屏幕尺寸上推/拉列 [英] Bootstrap 3: Push/pull columns only on smaller screen sizes

问题描述

我在页面上有以下布局:

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

但在较小的屏幕尺寸上，我想要以下布局:

1
<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>...:

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

解决方案

自己回答的，只是想着:移动优先！

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

首先在平板电脑上按我想要的顺序放置它们，然后将它们推/拉到桌面上的位置.

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

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

解决方案

Answered it myself, simply by thinking: mobile first!

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

这篇关于Bootstrap 3:仅在较小的屏幕尺寸上推/拉列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！