Bootstrap 4网格不尊重列方向的col-*
Posted
技术标签:
【中文标题】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 来获取窄宽度的列方向。用M尺寸切换到行方向。这似乎行得通。在每个卡片 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 帮了大忙。我现在有这种方法有效。我不确定我更喜欢哪种方法。我更喜欢项目的自然流动,而不是在不同的断点硬编码每张卡片的顺序,尽管有顺序控制很好。谢谢!以上是关于Bootstrap 4网格不尊重列方向的col-*的主要内容,如果未能解决你的问题,请参考以下文章