BULMA：如何使第一列的宽度相等？只用一张桌子？

如何解决BULMA：如何使第一列的宽度相等？只用一张桌子？

使用 Bulma 构建网页我想以这种方式显示多个事件：

FALSE OR TRUE

见https://codepen.io/baschtl/pen/PobXamm

但我希望每个“行/行”的第一列始终具有相同的宽度。

但也许这只能通过使用良好的旧 TABLE 元素 [https://bulma.io/documentation/elements/table/] 而不是列或其他东西来实现？

非常感谢！

温度

解决方法

您可以使用 is-x 类固定第一列的宽度，该类可以是 is-1 到 is-12。

<div class="columns">
    <div class="column is-1"></div>
    <div class="column"></div>
</div>

,

我不熟悉这个框架，但这在 CSS 中很简单。 您可以像这样为每个第一个元素添加一个具有宽度的类

.width-fix{
  width:10rem;
}

您的 html（减去 white-space:nowrap 和添加的宽度修复类）：

<div class="card" style="background: lightgreen;">
    <div class="card-header p-4">
      <div class="is-flex is-flex-direction-row ">
        <div class="width-fix has-text-right pr-4 is-one-quarter">
          <strong>[1st column]</strong><br/>
          Saturday<br /><strong>27th May 2022</strong> 
        </div>

        <div class="pr-4" style="min-width: 80px;">
          <strong>[2nd column]</strong><br/>
          <a href="#" target="_blank">
            <figure class="image is-128x128">
              <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
            </figure>
          </a>
</div>

另外请记住，如果您确实需要一张桌子，那么使用 table 也不错，因此您也可以考虑这样做。