Question

我有一个bootstrap 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列。

在更宽的显示范围内，网格采用列数。在较窄的宽度下，没有任何东西会迫使这些卡进入第二列。最好的处理方式是什么？

Answer 1

您有两种方法可以解决此问题：

第一个：订购列

您可以从行中删除flex-column类，以保留列的默认行为，然后可以使用order-*类对各列进行重新排序，以将其设置在所需的任何位置行。

Bootstrap Docs for Ordering Classes

第二个选项：在row

上设置最大高度

由于rows为flex containers，因此它们会覆盖页面的整个宽度（如果可用或以其他方式定义），因此当您设置flex-column时，您基本上会旋转行，并且由于视口将保持随着页面的增长，您应该在max-height上设置row，以便它知道何时将其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

Bootstrap 4网格在列方向上不支持col- *

1 个答案: