Question

我正在使用Bulma 0.4.0，但答案可能与Bulma本身无关。

如何将列高设置为等于其他？（见下面的codepen）

请注意，它们都在另一个列容器中，并且这些列的行数很少。

预期的行为：（我做了视错觉）

<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：它与align-content: stretch;类有关，但我不知道如何使用它。更多信息：http://cssreference.io/flexbox/#align-content

Answer 1

尝试添加css代码：

p.notification {
    height: 100%;
}

如何设置列高度等于几行Bulma（flexbox）？

1 个答案: