使用推/拉更改 Bootstrap 中 col-*-12 列的顺序

Posted 2023-03-06

【中文标题】使用推/拉更改 Bootstrap 中 col-*-12 列的顺序

【英文标题】：Change the order of col-*-12 columns in Bootstrap using push/pull

【发布时间】：2014-11-01 02:49:13

【问题描述】：

我有两个相同大小的列 (.col-xs-12)，当屏幕大小与移动设备对应时，我会更改它们的位置。我会将它们按相反的顺序排列。

我已经阅读了推送和拉取引导指令有助于实现这一点，但是是否可以使用以下类更改相同大小的两列的位置？

div.col-xs-12.col-xs-push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2

【问题讨论】：

我认为是在一行内交替列是的。但是在您的示例中，该列的大小为 12，我认为它不会起作用，因为它与对象的左右位置一起推/拉...在您的示例（col-12）中，您需要垂直反转。 .. ?

Yoy 无法按 push/pull 类重新排序具有 100% 的 width 的列。您可以更改 html 中 div 的顺序，然后在更大的屏幕上使用排序类。

@HashemQolami 好的，我明白你的意思。我首先从移动的角度思考

对于那些真正想颠倒这些全宽列的顺序的人，请看这里：***.com/questions/25660926/…

【参考方案1】：

实际上，您不能通过 push/pull 辅助类重新排序具有 .col-*-12 的列。列的总和超过了@grid-columns 定义的默认12 列。

您可以更改 HTML 中列的顺序，然后在更大的屏幕上使用排序类，如下所示：

EXAMPLE HERE

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

或者使用 this fancy approach 来反转垂直放置在彼此下方的列的顺序：

EXAMPLE HERE

@media (max-width: 767px) 
  .row.reorder-xs 
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  

  .row.reorder-xs > [class*="col-"] 
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  

值得注意的是，CSS 也会对are supported in IE9 进行转换；只是不要忘记添加供应商前缀。

【讨论】：

这是我可以建议的完美解决方案，我遇到了同样的情况，我使用了这个技巧并且效果很好

我使用了第一个选项，移动优先方法总是更好的选择！

第二个是真正的黑客。

不错的 CSS 技巧！这对我来说真的很有用，因为我的右栏是 position: fixed 在 lg 和 md 但 position: static 在 sm 和 xs。所以移动优先的 Bootstrap 方法在这种情况下不起作用。

谢谢...根据您的建议，正确的技术是“更改 HTML 中列的顺序并为更大的屏幕使用排序类”...我试图强制重新订购更小的屏幕。

【参考方案2】：

在 Bootstrap 4 中，您可以使用 flexbox 排序类更改全宽（12 个单位）列的顺序。 p>

2017 年更新 - Bootstrap 4 alpha 6

在 3.x 中，您只能向左或向右（水平）推/拉列。使用 4.x 中新的 flexbox 排序工具，现在可以垂直更改列的顺序...

<div class="container">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
  </div>  
</div>

http://www.codeply.com/go/7RUJORgxBK

---

更新 Bootstrap 4 测试版

alpha flex- 排序已更改为 order- 类。

<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>

https://www.codeply.com/go/VUjKsM3cUD

【讨论】：

更新：但是一些类被重命名了。在这种情况下 flex-first 应该改为 order-first 和 flex-sm-unordered 为 order-0 github.com/twbs/bootstrap/pull/21739

如果你阅读了 github 上的完整帖子，你会发现它们在 alpha 6 中还没有被重命名。

【参考方案3】：

你完全可以做到，见Bootstrap's Grid Column Ordering

当然，您的示例将无效，因为 xs-12 是全宽列，因此这仅适用于列总和为 12 的模型（或者如果您自定义 Bootstrap 网格，则为 16 或其他模型） .出于说明目的，请参阅同一页面上的 Bootstrap 示例：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

【参考方案4】：

如果您需要为响应式案例重新排序 cols，例如

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
  p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
  p test2

您可以使用 .pull-right 类并反转列顺序。

div.col-xs-12.col-sm-3.pull-right
  p test2
div.col-xs-12.col-sm-9
  p test1

那么它们是为了col-xs-12 并且对于其他断点正确显示。

【参考方案5】：

如果有人遇到像我这样的类似问题，只发现 push/pull 不符合您的需求，因为 col-xs-12 不会 pull/push 或使用超过 2 列会更难弄清楚这里的推/拉值是我的解决方案。

以下是@hashemquolami 的奇特解决方案

@media (max-width: 767px) 
 .row.reorder-xs 
   transform: rotate(180deg);
   direction: rtl; /* Fix the horizontal alignment */
 

 .row.reorder-xs > [class*="col-"] 
   transform: rotate(-180deg);
   direction: ltr; /* Fix the horizontal alignment */
 

虽然这种方法效果很好，但我有一个不同的解决方案：

引导网格通过向左浮动列来工作，这可以通过 css 轻松更改。查看下面的标记，作为奖励 col-md-offset-1 反转以模拟 5 个居中的列。

HTML

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

CSS

@media screen and ( min-width: 992px) 
  .reverseOrder [class^="col-"] 
      float: right;
  
  .reverseOrder .col-md-offset-1 
     margin-right: 8.333333333333332%;
     margin-left: 0px;
  

JSFIDDLE

【参考方案6】：

我遇到了同样的问题并通过这种方式解决了：

HTML

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
    <p>test</p>     
</div>  
<div class="col-md-2 col-sm-2 col-xs-12">
    <p>test</p> 
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
    <p>test</p>                 
</div>

CSS

@media (max-width: 767px)
    .less-than 
        display: none;
    
    .more-than 
        display: block !important;