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

Question

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 class 但它没有用。无论屏幕大小如何，它都会并排显示图像和文本。

Answer 1

Class.media，使用flexible规则，你可以使用媒体查询独立移动内容，设置规则flex-direction: column 在断点 480px （但您可以指定任何断点）。

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

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

How to make elements in Bulma box element full width in mobile view

html

css

bulma