如何在移动视图中使 Bulma 框元素中的元素全宽

【问题标题】：How to make elements in Bulma box element full width in mobile view如何在移动视图中使 Bulma 框元素中的元素全宽
【发布时间】：2021-01-30 07:50:25
【问题描述】：

bulma 文档中有一个带有媒体对象的盒子的示例：

<div class="box">
  <article class="media">
    <div class="media-left">
      <figure class="image is-64x64">
        <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
      </figure>
    </div>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
          <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
        </p>
      </div>
    </div>
  </article>
</div>

我是 Bulma 的新手，不知道如何在移动视图中将图像和段落文本设为全角并且一个在另一个之上。我曾尝试使用column 类，但它没有用。无论屏幕大小如何，它都会并排显示图像和文本。

【问题讨论】：

标签： html css bulma

【解决方案1】：

类.media，使用灵活规则，可以使用媒体查询独立移动彼此下方的内容，在断点处设置规则flex-direction: column480px（但你可以指定任何断点）。

@media (max-width: 480px) {
  .media {
    flex-direction: column;
  }
}

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

<div class="box">
  <article class="media">
    <div class="media-left">
      <figure class="image is-64x64">
        <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
      </figure>
    </div>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
          <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
        </p>
      </div>
    </div>
  </article>
</div>

【讨论】：