下面是一个用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,文档说:
所有列均为100%的设备宽度<;600px
我认为,即使对于较小的设备,添加类为col-6
的两列也应该是单行两列的.
显然我错了.我应该如何更改我的网格?
作为奖励...我希望在较大的屏幕上允许有几个字段(在示例中,如日期和时间),而在中/小屏幕上,它应该后退到只有一个字段用于行.
有没有一种简单的方法来实现这一点?