主页 / coding / 问题 / 77713538
Accepted
Mark
Asked: 2023-12-25 19:45:17 +0800 CST

使用响应式网格系统，将两列保留在同一行，同时允许更多列用于更大的屏幕

  • 772

这是用Chota编写的简单片段：

.card {
  margin: 30px;
}

.tag {
  margin-left: .5em;
}

.field {
  border-radius: 5px;
}
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link rel="icon" href="./favicon.ico" type="image/x-icon">

<div class="row is-center">
  <div class="col-12 col-6-md col-4-lg">
    <div class="card">
      <header class="is-center">
        <h4>Controllo remoto stufa</h4>
      </header>
      <p class="is-center">La stufa è<span class="tag">SPENTA</span></p>
      <div class="is-center">
        <button class="button error">ON/OFF</button>
      </div>
      <hr>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/thermometer.svg?size=24">Temperatura
        </div>
        <div class="col-6 is-center">
          <span class="tag field">22 °C</span>
        </div>
      </div>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/water-outline.svg?size=24">Umidità
        </div>
        <div class="col-6 is-center">
          <span class="tag field">50% RH</span>
        </div>
      </div>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/calendar-month.svg?size=24">Data<span class="tag field">25/12/2023</span>
        </div>
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/clock-outline.svg?size=24">Ora<span class="tag field">12:00</span>
        </div>
      </div>
    </div>
  </div>
</div>

这是它在大屏幕上的显示方式：

在此输入图像描述

在较小的屏幕中：

在此输入图像描述

我希望，即使在较小的屏幕中，标签（即“温度”）及其值也保持在同一行。由于网格系统的宽度是 12 并且文档说：

对于设备宽度 < 600 像素，所有列均为 100%

我认为添加两列和类col-6应该会导致单行有两列，即使对于较小的设备也是如此。

显然我错了。我应该如何更改我的网格？

作为奖励...我想允许在较大的屏幕上有几个字段（在示例中，如日期和时间），而在中/较小的屏幕上，它应该回退到只有一个行字段。

有没有一种简单的方法可以实现这一目标？

html

1 个回答

  1. Best Answer

    新库，但它基本上是弹性布局，因此您可以查找一个具有属性的类，flex-wrap: nowrap只需创建一个新的类，如下面的演示 ( .mobile-no-wrap) 并将其添加到您需要的位置。

    作为奖励...我想允许在较大的屏幕上有几个字段（在示例中，如日期和时间），而在中/较小的屏幕上，它应该回退到只有一个行字段。

    基本上只是 的另一种情况flex-wrap: nowrap，将其添加到父级 div 以使子级位于同一行，然后在较小的屏幕尺寸下使用媒体查询将其打破，并将属性flex-wrap从反转nowrap为wrap。

    .card {
  margin: 30px;
}

.tag {
  margin-left: .5em;
}

.field {
  border-radius: 5px;
}

.row.mobile-no-wrap {
  flex-wrap: nowrap;
}
    <link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link rel="icon" href="./favicon.ico" type="image/x-icon">

<div class="row is-center">
  <div class="col-12 col-6-md col-4-lg">
    <div class="card">
      <header class="is-center">
        <h4>Controllo remoto stufa</h4>
      </header>
      <p class="is-center">La stufa è<span class="tag">SPENTA</span></p>
      <div class="is-center">
        <button class="button error">ON/OFF</button>
      </div>
      <hr>
      <div class="row mobile-no-wrap">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/thermometer.svg?size=24">Temperatura
        </div>
        <div class="col-6 is-center">
          <span class="tag field">22 °C</span>
        </div>
      </div>
      <div class="row mobile-no-wrap">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/water-outline.svg?size=24">Umidità
        </div>
        <div class="col-6 is-center">
          <span class="tag field">50% RH</span>
        </div>
      </div>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/calendar-month.svg?size=24">Data<span class="tag field">25/12/2023</span>
        </div>
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/clock-outline.svg?size=24">Ora<span class="tag field">12:00</span>
        </div>
      </div>
    </div>
  </div>
</div>

    • 1

相关问题