我使用的是Bulma 0.4.0，尽管答案可能与Bulma本身无关。
如何设置列高与其他列高相同？（请参阅下面的代码）
请注意，它们都在另一个列容器中，并且这些列的行很少。
预期行为：* （哇我制造了幻觉）*
https://codepen.io/anon/pen/JNKexr
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
</head>
<body>
<div class="columns">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.
</div>
<div class="column">
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel </p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel </p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet</p>
</div>
<div class="column">
<p class="notification is-success">Nulla</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor,
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet</p>
</div>
<div class="column">
<p class="notification is-success">Nulla</p>
</div>
<div class="column is-6">
<p class="notification is-warning">Pellentesque eros tortor,
</p>
</div>
</div>
</body>
</html>- 问题与我之前的问题有关：How to set column height equal to longest column in Bulma (flexbox)? *
- 编辑：更正标题
- edit2: it has something to do with
align-content: stretch;class, though I'm have no idea how to use it. More info: http://cssreference.io/flexbox/#align-content
2条答案
按热度按时间wfveoks01#
尝试添加css代码：
lsmd5eda2#
我使用了下面的CSS规则，这样我就可以使用类
.is-equal-height来对齐列。