4

你好，我在 Bootstrap 3 中做一个列排序接口，我遇到了这个问题。

我有两列：

LG：A 列 B 列

MD：
       A 列 B 列

但我需要这个：

LG：A 列 B 列

MD：ColumnB
       ColumnA

我如何在 MD 分辨率上重新排序 div？我正在尝试拉和推，但没有运气:(

提前致谢...

这是我的代码：

<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
    <div class="col-xs-12 col-md-12 col-lg-push-0 col-lg-9">
        ColumnA
    </div>

    <div class="col-xs-12 col-md-12 col-lg-pull-0 col-lg-3">
        ColumnB
    </div>
</div>

4

2 回答 2

9

Bootstrap 3 使用移动优先的方法，这意味着首先为较小的屏幕修复网格等内容，然后继续为桌面应用样式。

如果在语义上和 SEO 方面都可以（与 IMO 相同），请更改标记以反映您在Extra Small、Small和Medium设备中的列所需的顺序，然后应用col-lg-push-*并col-lg-pull-*为大型设备重新排序列。

这是您的案例的代码：

<div class="row">
    <div class="col-lg-9 col-lg-push-3">
        ColumnB
    </div>
    <div class="col-lg-3 col-lg-pull-9">
        ColumnA
    </div>
</div>


如果更改标记在语义上没有意义，恐怕col-*-push-*也col-*-pull-*无济于事，并且可能会出现一些黑客行为......

于 2014-01-02T18:09:14.930 回答
-1

我有一个建议，但可能不是完美的解决方案，但如果您只需要重新排序这两列，则可以使用它：

  1. 从您使用的代码( push )和( pull )中删除。
  2. 在原始代码下制作另一份代码副本。
  3. 现在重要的是使用Bootstrap 提供的响应式实用程序。
  4. 您需要做的就是使用这两个类( .visible-xx )和( .hidden-xx ) 和(xx : xs, sm, md, lg)。
  5. 通过将它们与您的原始代码一起使用，将使您想要的列以您需要的分辨率可见或隐藏。

例如：

 LG: ColumnA -- .visible-xx or .hidden-xx  ( at the needed resolution )
     ColumnB -- .visible-xx or .hidden-xx  ( at the needed resolution )

那么使用这两个类所需的代码也可以是这样的：

MD: ColumnB  -- .visible-xx or .hidden-xx  ( at the needed resolution )
    ColumnA  -- .visible-xx or .hidden-xx  ( at the needed resolution )

** 记住不要忘记更改代码在副本中的顺序，例如：

<div class="row">
   <div class="">
      ColumnB
   </div>

   <div class="">
      ColumnA
   </div>

重要的：

最好使用修饰符类.col-md-push-*，并.col-md-pull-*尽可能参考 Bootstrap 文档中的列排序部分，如果它不起作用，您可以使用其他方式。

所以你可以先试试这个：

<div class="row">
    <div class="col-lg-9 col-lg-push-3">
        Column B will be here
    </div>
    <div class="col-lg-3 col-lg-pull-9">
        Column A will be here
    </div>
</div>

希望这会帮助你。

于 2013-10-05T01:15:41.750 回答