垂直对齐列表引导程序[重复]

Posted 2023-03-05

【中文标题】垂直对齐列表引导程序[重复]

【英文标题】：Vertical align list bootstrap [duplicate]

【发布时间】：2017-07-16 12:08:09

【问题描述】：

我正在使用 Bootstrap 制作许多列表，并且我的列表有各种大小。 我想强迫它们被贴在上一行的列表下，比如图片上的“第 7 章”，而不关心大小。有人知道怎么做吗？ vertical-align 不起作用... 我的代码： <div class="row"> <ul class="col-md-4"></ul> <ul class="col-md-4"></ul> <ul class="col-md-4"></ul> <ul class="col-md-4"></ul> <ul class="col-md-4"></ul> </div> &lt;ul&gt; 有各种尺寸

编辑： 每三个集团使用<div class="clearfix"><\div> 解决！

【问题讨论】：

您好，您需要发布一些复制该问题的代码，以便我们有一个minimal reproducible example 可以与您合作并为您解决。

刚刚做了，对不起！

每 3 个 col-* codeply.com/go/G4JG4GUSbY 使用一个 responsive reset（AKA clearfix）

【参考方案1】：

如果我理解正确，您希望您的列表显示在另一个之下吗？ （而不是并排？）

如果是这样，请尝试在每个 <ul> 的末尾添加一个 <br> 这会强制下一个元素在一个新行中（在前一个下）

即-

<div class="row">
    <ul class="col-md-4"></ul><br>
    <ul class="col-md-4"></ul><br>
    <ul class="col-md-4"></ul><br>
    <ul class="col-md-4"></ul><br>
    <ul class="col-md-4"></ul><br>
</div>

【讨论】：

问题是两列之间的垂直空白很大