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

本文介绍了如何设置列高度等于少数行Bulma（flexbox）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的是Bulma 0.4.0，但答案可能与Bulma本身没有关系。

我可以设置列高度等于其他？（请参阅下面的codepen）

注意，它们全部位于另一个列容器中，并且这些列中只有少数几行。

预期的行为：（哇我造成错觉）

 < html> 
< head> 
< link rel =stylesheethref =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 semiquitet mauris，non pretium orci nisl at est。Curabitur placerat pharetra augue。 Etiam non eros nulla。普瑞斯特等奖杯sem dui，id varius enim convallis vel。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。在这个世界上，有一个永恒的信仰， 
< / div> 
< div class =column> 
 
< div class =columns> 
< div class =column> 
< p class =notification is-info> Lorem ipsum< / p> 
< / div> 
< div class =column> 
 < / div> 
< / div> 
 
 
< div class =columns> 
< div class =column> 
< p class =notification is-info> Lorem ipsum< / p> 
< / div> 
< div class =column> 
 < / 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 =通知是危险> 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>

问题与我以前的问题有关： li>

解决方案

试试添加css代码：

  p.notification {
 height：100％; 
}

I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.

How can I set column height equal to others? (see codepen below)

Notice they are all in another column container, and there are few rows of those columns.

Expected behaviour: (woah i made optical illusion)

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>

Question is related to my previous one: How to set column height equal to longest column in Bulma (flexbox)?

edit: corrected title
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

解决方案

try to add the css code:

p.notification {
    height: 100%;
}

这篇关于如何设置列高度等于少数行Bulma（flexbox）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！