3

我正在使用 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>

问题与我之前的问题有关：如何在 Bulma (flexbox) 中设置列​​高等于最长列？

4

1 回答 1

2

尝试添加css代码：

p.notification {
    height: 100%;
}
于 2017-04-24T07:24:12.670 回答