下面是一个用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>

下面是它在大屏幕上的显示方式:

enter image description here

在较小的屏幕上:

enter image description here

我想,即使在较小的屏幕上保持在同一行的标签(即"温度")和他们的价值观.因为网格系统的宽度是12,文档说:

所有列均为100%的设备宽度&lt;600px

我认为,即使对于较小的设备,添加类为col-6的两列也应该是单行两列的.

显然我错了.我应该如何更改我的网格?

作为奖励...我希望在较大的屏幕上允许有几个字段(在示例中,如日期和时间),而在中/小屏幕上,它应该后退到只有一个字段用于行.

有没有一种简单的方法来实现这一点?

推荐答案

新的库,但它基本上是灵活的布局,所以你要么查找一个属性为flex-wrap: nowrap的类,就像我下面的演示(.mobile-no-wrap)那样创建一个新的类,并将它添加到你需要的地方.

作为奖励...我希望在较大的屏幕上允许有几个字段(在示例中,如日期和时间),而在中/小屏幕上,它应该后退到只有一个字段用于行.

基本上只是另一个flex-wrap: nowrap的例子,将它添加到父div中,使Childs在同一行上,然后使用媒体查询在较小的屏幕尺寸时中断它,并将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>

Html相关问答推荐

卡片上方的文本

获得一个css框,以便在页面太小时不再粘在页面的角落.

创建带有弯曲边框的水平时间线

在一行中对齐文本和图标

Bootstrap nav没有崩溃

现代网络浏览器可以并行下载哪些类型的网络资源?还有,什么东西不能并行下载?

IFRAME中的Chrome图像未调整大小

如何使div填充父项的剩余高度

Swift WkMessageHandler 消息不发送

如何使用 HTML 将对象数组发送到 Nodejs Express

为什么我的网页显示网格区域彼此相邻,而不是我设置它们的方式?

如何使粘性导航栏能够跨其他组件工作?

使用简单的 HTML 设计公司徽标和文本

使用 popover api 和 `

我正在使用 NVDA 并多次读取关闭按钮,但它的读取非常完美

如何在 css 和 html 中创建花状 struct

如何为某些行具有 rowspan 的表的每个奇数行着色

水平对齐两列中的两个按钮 同一级别

如何让 Reindeer 居中

我的卡片内容无法在 bootstrap 5 中正确居中