如何在Bulma（flexbox）中将列高设置为最长的列？

Question

如何在Bulma（flexbox）中将列高设置为最长的列？

cssflexboxbulma

23

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

- curious

只需要添加更多的文本，您就会看到我的问题。在您的屏幕上，“column”内容的列足够大，因此它们在同一行上，因此它们是相等的。 - curious

6个回答

13

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

您可以使用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 类指定列的水平大小。查看此 Pen 以查看其效果

- Michał

4

这对我来说很有用。

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

.section1 {
  height: 100%;
}

- Jin Lim

1

这对我来说很好用，使用以下代码：

。

<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中工作。

- Rory Jarrard

0

align-items: stretch http://cssreference.io/flexbox/

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

参考：https://github.com/jgthms/bulma/issues/696

- mythicalcoder

这与问题无关。问题要求只有一个“列”的标记。对于此解决方案，您需要至少两个列，正如您链接的文档中所写。 - dahrens

我也回答了类似的问题。我在谷歌和StackOverFlow上搜索，结果只有这个问题。如果还有其他人回答我会很高兴，但是没有，所以我自己回答了。也许我的回答能帮到像我一样的人。 - mythicalcoder

0

我注意到将.column设置为flex会破坏布局。

我用以下CSS规则解决了这个问题，这样我就可以使用类.is-equal-height来对齐列。

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

- Jacopo Pace

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

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

.column {
  display: flex;
}

更新的 CodePen

堆栈片段

<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>

在Bulma中，您可以使用类.is-flex来实现相同的效果。