Kekalkan sifat Flex responsif semasa mengulang tatasusunan menggunakan Bar Hendal

Question

Saya mempunyai kod berikut (menggunakan Handlebars, kod berfungsi daripada JSFiddle):

<div class="kad-bekas">
    {{#each this.cards}}
    <div
      class="kad-bekas bekas-col-inner col-12 col-md-6 col-lg-3"
    >
      <div class="kad imej">
        <div class="imej-kandungan">
          <p class="tajuk">{{title}}</p>
        </div>
      </div>
    </div>
    {{/setiap}}
  </div>

{
  "3columnLayout": palsu,
  "kad": [
    {
      "tajuk": "Kad 1"
    },
    {
      "tajuk": "Kad 2"
    },
    {
      "tajuk": "Kad 3"
    }
  ]
}

Pada asasnya, ia melingkari susunan kad dan mencipta bekas kad Kemudian gunakan bootstrap untuk menetapkan kelas CSS kepada setiap div, contohnya col-md-6

• Mudah alih: Item muncul dalam satu lajur
• Tablet: item muncul dalam 2 lajur
• Desktop: item dipaparkan dalam 3 lajur

Ini semua berfungsi seperti yang diharapkan dan secara visual memberikan UI yang diingini (tanpa mengira bilangan kad): Contoh di bawah:

Walau bagaimanapun, seperti yang ditunjukkan dalam JSON, saya memerlukan sifat di luar tahap kad individu untuk menentukan sama ada desktop harus pecah daripada reka letak 4 lajur kepada reka letak 3 lajur.

Saya tidak mahu mengulangi sifat ini untuk setiap kad dalam tatasusunan kad, jadi susun semula kod saya seperti yang ditunjukkan dalam coretan kod saya (menggunakan Handlebars): https://jsfiddle.net/stcfa5wh/20/< ; /p >

Walau bagaimanapun, ini bermakna walaupun saya boleh mengakses nilai 3columnLayout: HTML dibuang ke halaman dan saya tidak lagi boleh menggunakan col cara saya lakukan; Selesai sebelum ini.

Sebagai contoh, pada tablet, saya boleh menetapkan setiap kad imej kepada 50% lebar, tetapi ia mengabaikan keperluan untuk baris.

Bolehkah sesiapa mencadangkan cara untuk mengekalkan struktur HTML sambil masih melaksanakan atribut peringkat teratas (cth. 3columnLayout)?

Answer 1

Saya tidak faham mengapa apabila anda cuba melaksanakan 3columnLayout 标志时停止使用 Bootstrap。使用 Bootstrap，我们将在每列上使用类 col-lg-4 untuk membuat susun atur 3 lajur. Oleh itu, ungkapan bersyarat yang kita perlukan untuk setiap lajur ialah: {{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}}.

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

const data = {
  "3columnLayout": true,
  "cards": [{
      "title": "Card 1",
    },
    {
      "title": "Card 2",
    },
    {

      "title": "Card 3",

    },
    {
      "title": "Card 4",

    },
    {
      "title": "Card 5",
    },
    {

      "title": "Card 6",
    },
    {
      "title": "Card 7",
    },
    {
      "title": "Card 8",
    }
  ]
}

const output = template(data);

document.getElementById('Output').innerHTML = output;

.image-card {
  height: 432px;
  background-color: lightblue;
  border: 1px solid;
  margin-bottom: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script id="Template" type="text/template">
  <div class="container">
    <div class="row">
      {{#each this.cards}}
        <div class="col-md-6 {{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}}">
          <div class="image-card">
            <div class="image-content">
              <p class="title">{{title}}</p>
            </div>
          </div>
        </div>
      {{/each}}
    </div>
  </div>
</script>
<div id="Output"></div>