Início / coding / Perguntas / 77713538
Accepted
Mark
Asked: 2023-12-25 19:45:17 +0800 CST

Usando um sistema de grade responsivo, mantenha duas colunas na mesma linha e permita mais colunas para telas maiores

  • 772

Aqui está um trecho simples escrito com 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>

Veja como aparece em telas grandes:

insira a descrição da imagem aqui

e em telas menores:

insira a descrição da imagem aqui

Quero, mesmo em telas menores, manter na mesma linha as etiquetas (ou seja, "Temperatura") e seus valores. Como a largura do sistema de grade é 12 e a documentação diz:

Todas as colunas são 100% para largura do dispositivo <600px

Achei que adicionar duas colunas com classe col-6deveria levar a uma única linha com duas colunas, mesmo para dispositivos menores.

Obviamente estou errado. Como devo mudar minha grade?

Como bônus ... eu gostaria de permitir que telas maiores tivessem alguns campos (no exemplo, como data e hora), enquanto em telas intermediárias/menores ele deveria voltar a ter apenas um campo por linha.

Existe uma maneira simples de conseguir isso?

html

1 respostas

  1. Best Answer

    Nova biblioteca, mas basicamente com layout flexível, então ou você procura uma classe com propriedade flex-wrap: nowrapde apenas criar uma nova como minha demonstração abaixo ( .mobile-no-wrap) e adicioná-la onde for necessário.

    Como bônus ... eu gostaria de permitir que telas maiores tivessem alguns campos (no exemplo, como data e hora), enquanto em telas intermediárias/menores ele deveria voltar a ter apenas um campo por linha.

    Basicamente, apenas outro caso de flex-wrap: nowrap, adicione-o ao div pai para deixar os filhos dentro da mesma linha e, em seguida, quebre-o quando estiver em um tamanho de tela menor usando a consulta de mídia e inverta a flex-wrappropriedade de nowrappara 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

relate perguntas