如何仅在较小的屏幕尺寸上推/拉 Bootstrap 3 中的列？

Bootstrap 3：如何仅在较小的屏幕尺寸上推/拉列

Bootstrap 提供了推拉列以调整其列的功能基于屏幕尺寸的布局。但是，有时您可能会遇到这样的情况：您只想在较小的屏幕尺寸上推/拉列，同时保持其在较大屏幕上的位置。

考虑以下 HTML 结构：

<code class="html"><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></code>

此布局在大屏幕上显示如下：

|    1    |  2  |  3  |  4  |    5    |

但是您想要在较小的屏幕上使用不同的布局：

|        1        |        5        |
|     2     |     3     |     4     |

解决方案：

为了实现这一目标，我们需要以“移动优先”的思维来解决问题。首先配置最小屏幕尺寸的布局，然后使用推/拉类将列移动到较大屏幕上的所需位置。

更新的 HTML：

<code class="html"><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></code>

通过将大屏幕和小屏幕的列类放置在同一个标​​签中，我们可以确保列首先在平板电脑上按所需的顺序放置。然后，推/拉类用于调整它们在桌面上的位置。

此更新的代码将在所有屏幕尺寸上产生所需的布局：

大屏幕：

|    1    |        5        |     2     |     3     |     4     |

小屏幕：

|        1        |        5        |
|     2     |     3     |     4     |

以上是如何仅在较小的屏幕尺寸上推/拉 Bootstrap 3 中的列？的详细内容。更多信息请关注PHP中文网其他相关文章！