布尔玛卡 - 尺寸错误：卡太大答案

【问题标题】：Bulma Card - Error about dimensions: the card is too big布尔玛卡 - 尺寸错误：卡太大
【发布时间】：2021-06-17 07:17:42
【问题描述】：

我正在优化我的网站。几分钟前，我刚刚从 Bulma 框架中集成了一张卡片。这是相关元素的文档https://bulma.io/documentation/components/card/

问题是它让卡片对我来说太大了，尽管我尝试通过查看文档和其他类似问题来减少“图像 is-4by3”和“1980x960”。

这是当前结果的代码和图片：

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
texte ici
      <br>
    </div>
  </div>
</div>

【问题讨论】：

标签： css bulma

【解决方案1】：

这是因为默认情况下，卡片会占用所有可用宽度。
要解决此问题，您可以将其包装在另一个元素中，例如 columns 并使用 size classes 为您找到合适的元素。

半尺寸居中列的示例：

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css" rel="stylesheet"/>

<div class="columns is-centered">
  <div class="column is-half">

    <!-- Your card code: --> 
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">
        <div class="content">
            texte ici
            <br>
        </div>
      </div>
    </div>

  </div>
</div>

结果：

【讨论】：