css 如何在Bulma(flexbox)中设置列高等于最长列？

5q4ezhmt 于 2023-01-06 发布在其他

关注(0)|答案(6)|浏览(115)

我使用的是Bulma 0.4.0，尽管答案可能与Bulma本身无关。
如何将列高设置为与其他列高相同？（见下面的截图）
编辑：codepen添加更多表示实际行为的文本：https://codepen.io/anon/pen/vmKVbx
预期行为：

实际行为：

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

css

来源：https://stackoverflow.com/questions/43564132/how-to-set-column-height-equal-to-longest-column-in-bulma-flexbox

6条答案

按热度按时间

41zrol4v1#

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

.column {
  display: flex;
}

Updated 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来实现相同的功能。

赞(0）回复(0）举报 2023-01-06

ix0qys7i2#

我知道这有点晚了，但也许有人谁寻找类似的解决方案会发现我的答案有帮助。
你可以使用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类指定列的水平大小。Check this pen to see this in action

赞(0）回复(0）举报 2023-01-06

6tdlim6h3#

这对我很管用

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

.section1 {
  height: 100%;
}

赞(0）回复(0）举报 2023-01-06

hs1rzwqc4#

这对我来说很好用这个代码：

<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（当然），边缘40.15063.674.0，火狐浏览器57.0.

赞(0）回复(0）举报 2023-01-06

nom7f22z5#

一个月一个月一个月一个月

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

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

赞(0）回复(0）举报 2023-01-06

yi0zb3m46#

我注意到将.column设置为flex破坏了布局。
我用下面的CSS规则解决了这个问题，这样，如果我想要对齐列，我就可以使用类.is-equal-height。

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

赞(0）回复(0）举报 2023-01-06

我来回答

css 如何在Bulma(flexbox)中设置列高等于最长列？

6条答案

相关问题

热门标签

最新问答