Bootstrap 4网格不尊重列方向的col-*

Posted 2023-03-21

【中文标题】Bootstrap 4网格不尊重列方向的col-*

【英文标题】：Bootstrap 4 grid not honoring col-* in column direction

【发布时间】：2019-04-28 10:08:59

【问题描述】：

我有一个引导程序 4.1 应用程序。我正在尝试布置一组 6 张卡片。

在宽（横向）显示器上，我想显示 2 行 3 列。

[1] [2] [3]
[4] [5] [6]

但在窄（纵向）显示器上，我想显示 3 行 2 列，并且我希望卡片保持列向下的顺序，如下所示：

[1] [4]
[2] [5]
[3] [6]

我遇到的问题是，当网格在列方向时，它似乎不尊重 col-*，我得到了这个：

[1]
[2]
[3]
[4]
[5]
[6]

这是我的标记：

<div class="container">
    <div class="row flex-column flex-md-row">
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 1</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 2</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 3</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 4</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 5</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 6</h5>
            <div class="card-body"></div>
        </div>
    </div>
</div>

在具有行类的 div 上，我默认使用 flex-column 来获取窄宽度的列方向。用Ｍ尺寸切换到行方向。这似乎行得通。在每个卡片 div 上，我默认为 col-6 以仅在小宽度下获得两列，并在中等大小时切换到 col-4 以获得更宽显示的 3 列。

对于更宽的显示器，网格会考虑列数。在较窄的宽度下，没有任何东西会迫使卡片进入第二列。最好的处理方法是什么？

【问题讨论】：

删除 flex-column 类以获得更小的宽度，这应该按预期显示所有内容，然后以您需要的方式重新排列卡片，您可以在列上定义 order-* 类跨度>

或者在你的行上设置一个明确的高度，因为设置 flex-column 将无限期地扩展行，因为视口可以随之增长：codepen.io/IvanS95/pen/aQjBdz

也有理由确定 row 默认设置为 row 用于显示目的。

【参考方案1】：

你有两种方法可以解决这个问题：

第一个：排序列

您可以从行中删除 flex-column 类以保持列的默认行为，然后您可以使用 order-* 类对每一列重新排序，以将它们设置在行上您想要的任何位置。

Bootstrap Docs for Ordering Classes

第二个选项：在row上设置最大高度

由于rows 是flex containers，如果可用或以其他方式定义，它们会跨越页面的整个宽度，当您设置flex-column 时，您基本上会旋转行，并且由于视口将随着页面不断增长，您应该在row 上设置一个max-height，以便它知道何时将其flex-items（在这种情况下为列）包装到一个新列。

.no-order 
   max-height: 300px

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <h1>Without Ordering</h1>
    <div class="row no-order flex-column flex-md-row">
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 1</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 2</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 3</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 4</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 5</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 6</h5>
            <div class="card-body"></div>
        </div>
    </div>
</div>

<!-- With Ordering -->
<div class="container mt-5">
   <h1>With Column Ordering</h1>
    <div class="row">
        <div class="card col-6 col-md-4 order-1 order-md-1">
            <h5 class="card-header">Card 1</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-3 order-md-2">
            <h5 class="card-header">Card 2</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-5 order-md-3">
            <h5 class="card-header">Card 3</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-2 order-md-4">
            <h5 class="card-header">Card 4</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-4 order-md-5">
            <h5 class="card-header">Card 5</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-6 order-md-6">
            <h5 class="card-header">Card 6</h5>
            <div class="card-body"></div>
        </div>
    </div>
</div>

工作示例：https://codepen.io/IvanS95/pen/aQjBdz

【讨论】：

我无法以第一种方式工作。从行 div 中删除 flex-column 类并将 order-* 添加到我的卡片 div 仍然不会导致卡片换行到下一列。第二种方法确实有效。知道为什么第一个可能不起作用吗？

嗯，我会说可能有错字，我更新了我的代码笔以显示我的意思，看看，也许你的代码有什么不同，让我知道！

@JoeRattz 你能做到吗？也许我错过了什么，只是检查一下

是的，我成功了，谢谢！我错过了您正在更改不同断点的顺序值。 codepen 帮了大忙。我现在有这种方法有效。我不确定我更喜欢哪种方法。我更喜欢项目的自然流动，而不是在不同的断点硬编码每张卡片的顺序，尽管有顺序控制很好。谢谢！