如何设置列高等于Bulma（flexbox）中最长的列？

Question

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

如何将列高设置为与其他列相同？（见下面的截图）

编辑：带有更多文本的codepen，显示实际行为：https://codepen.io/anon/pen/vmKVbx

预期行为：

expected behavior

实际行为：

actual behavior

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
  <div class="column">
    <p class="notification is-info">First column</p>
  </div>
  <div class="column">
    <p class="notification is-success">Second column</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Third column</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Fourth</p>
  </div>
</div>

Answer 1

这是一个简单的解决方案，通过添加此 CSS 规则，并确保它在 Bulma CSS 之后加载

.column {
  display: flex;
}

更新了代码笔

堆栈片段

<html>
  <head>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
  
    <style>
      .column {
        display: flex;
      }
    </style>

</head>
<body>
<div class="columns">
  <div class="column">
    <p class="notification is-info">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.</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
  </div>
</div>
</body>
</html>

在布尔玛，你有班级

.is-flex

来实现同样的目标。

Answer 2

更新（2024 年 8 月）Bulma >= 1.0.0 中删除了图块。

对于

Bulma >= 1.0.0 使用智能网格（需要额外的 CSS）：

HTML：

<div class="container" id="app">
  <div class="grid">
    <div class="cell">
      <article class="box">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi arcu, interdum ac ante a, pharetra ornare mauris. Vestibulum quis quam blandit lacus lacinia tempor. Sed viverra lobortis orci nec tincidunt. Maecenas sit amet euismod ligula. Nunc in maximus eros. Praesent sapien est, finibus a tempus tempor, congue id purus. Sed egestas at velit nec lacinia. Pellentesque cursus vulputate nisi nec viverra. Duis quis libero vel felis fermentum facilisis ac ac elit. Etiam faucibus laoreet fringilla. Proin sed lorem purus. Praesent viverra elementum nibh, eu porta libero scelerisque in. 
      </article>
    </div>
    <div class="cell">
      <article class="box">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </article>
    </div>
</div>
</div>

CSS：

.cell {
  display: grid;
  height: 100%;
}

检查这支笔以查看其实际情况。

已弃用（仅适用于布尔玛

<= 0.9.4)

我知道有点晚了，但也许寻找类似解决方案的人会发现我的答案很有帮助。

您可以使用 Bulma 的

Tile 系统来获得类似等高柱的东西。

<div class="tile is-ancestor">
  <div class="tile is-horizontal">
    <div class="tile is-parent">
      <div class="tile is-child">
        <!--Content here-->
      </div>
    </div>
    <div class="tile is-parent">
      <div class="tile is-child box">
        <!--Content here-->
      </div>
    </div>
  </div>
</div>

无需额外的 CSS。您还可以使用

is-1

is-12

 类指定列的水平尺寸。

检查这支笔以查看其实际情况

Answer 3

这对我有用。

<div class="column">
    <section class="section1">
    ...
    </section>
</div>

.section1 {
  height: 100%;
}

Answer 4

对于我来说，使用此代码效果很好：

<div class="columns">
    <div class="column my-class">
        one thing
    </div>
    <div class="column my-class">
        many other <br><br><br> etc. things
    </div>
</div>

<style>
.column.my-class {
    display: inline-flex; 
}

.column.my-class > div {
    width: 100%; // only Edge needed this nonsense
}
</style>

适用于 Chrome 61.0.3163.100（当然）、Edge 40.15063.674.0、Firefox 57.0。

Answer 5

align-items: stretch

http://cssreference.io/flexbox/

.columns {
    flex-wrap: wrap;
    align-items: stretch;
}

参考：

https://github.com/jgthms/bulma/issues/696

Answer 6

我注意到将

.column

 制作为

flex

 破坏了布局。

我用以下CSS规则解决了，这样如果我想要对齐列，我可以使用类

.is-equal-height

。

.columns.is-equal-height > .column > * {
    height: 100% !important;
}

如何设置列高等于Bulma（flexbox）中最长的列？

问题描述投票：0回答：6

6个回答

更新（2024 年 8 月）Bulma >= 1.0.0 中删除了图块。

<= 0.9.4)

最新问题

如何设置列高等于Bulma（flexbox）中最长的列？

问题描述 投票：0回答：6

6个回答

更新（2024 年 8 月）Bulma >= 1.0.0 中删除了图块。

<= 0.9.4)

最新问题

问题描述投票：0回答：6