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

Answer 1

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

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

Answer 2

我不熟悉这个框架，但这在 CSS 中非常简单。 您可以向每个第一个元素添加一个具有宽度的类，如下所示

.width-fix{
  width:10rem;
}

您的 html（减去空白：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>

还要记住，如果您确实需要一张桌子，那么使用桌子也不错，所以您也可以考虑这一点。

Answer 3

聚会有点晚了，但仍然：

最近我有类似的需求，并设法使用

column is-narrow

（而不是

column is-3

或

column is-one-quarter

）+为每行中的

<div>

设置固定宽度的东西来使其工作。

幸运的是，我能够计算出适用于我所有行中所有此类单元格的

width

值。如果您的数据更加动态，那么您可能需要在运行时计算它。

请注意，

is-narrow

设计为与至少一个其他

<div className="column">

without 类名称中的

is-...

结合使用，然后它会自动调整大小以填充剩余宽度。

示例：

const rows = ...   // array of row data
const width = 320; // calculated during development or at runtime

return rows.map(row => 
  <div key={row.id} className="columns">
    <div className="column is-narrow" style={{ width }}>
      {row.text1}
    </div>
    <div className="column is-4">
      {row.text2}
    </div>
    <div className="column">
      {row.text3}
    </div>
  </div>
);