Bootstrap 中带有拉/推/偏移的行/列顺序 [英] Order of rows/columns with pull/push/offset in Bootstrap

查看：22
本文介绍了Bootstrap 中带有拉/推/偏移的行/列顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这个问题是针对 Twitter Bootstrap 3 的.我有三列，我希望它们的顺序和大小根据屏幕大小而不同.

在 md 上:

----------------|1 |2 |3 |----------------

在 sm 上:

----------------|1 |3 |----------------|2 |----------------

我想我应该用第二个和第三个 col 元素来玩拉/推，但我还做不到......

我知道这行不通，但目前看来...

<div class="col-sm-6 col-md-4 form-group">...
<div class="col-sm-12 col-sm-push-6 col-md-4 form-group">...

<div class="col-sm-6 col-sm-pull-6 col-md-4 form-group">...

解决方案

这看起来如何?实时视图

<div class="col-sm-6 col-md-4 form-group">1
<div class="col-sm-6 col-md-4 col-md-push-4 form-group">3

<div class="col-sm-12 col-md-4 col-md-pull-4 form-group">2

希望这会有所帮助！

This question is for Twitter Bootstrap 3. I have three columns whose order and size I want to be different depending on the screen size.

On md:

----------------
|1   |2   |3   |
----------------

On sm:

----------------
|1      |3     |
----------------
|2             |
----------------

I think I should play around with pulls/pushes with the second and third col elements but I can't get it right yet...

I know this doesn't work, but so far it looks like...

<div class="row">
  <div class="col-sm-6 col-md-4 form-group">
    ...
  </div>
  <div class="col-sm-12 col-sm-push-6 col-md-4 form-group">
    ...
  </div>
  <div class="col-sm-6 col-sm-pull-6 col-md-4 form-group">
    ...
  </div>
</div>

解决方案

How does this look? Live view

<div class="row">
  <div class="col-sm-6 col-md-4 form-group">
    1
  </div>
  <div class="col-sm-6  col-md-4 col-md-push-4 form-group">
    3
  </div>
  <div class="col-sm-12 col-md-4 col-md-pull-4 form-group">
    2
  </div>

</div>

Hope this helps!

这篇关于Bootstrap 中带有拉/推/偏移的行/列顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆