masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Bagaimanakah cara saya mengubah suai kad ini supaya responsif dengan Boostrap 4?
P粉509383150
P粉509383150 2024-04-05 10:48:45
0
1
4869

Cara membuat setiap satu row tunjukkan 4 kad dan sudah tentu menjadikannya bertindan jika saiz skrin berubah. Sebaik-baiknya perlu ada sedikit ruang di antara mereka. Saya telah mencuba setiap kombinasi yang mungkin saya boleh selidik. 

#cardsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    overflow: hidden;
    height: 1200px;
  }

  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 16px;
    width: calc(25% - 16px);
    padding-bottom: 10px;
    font-size: 12px;
    border-radius: 5px !important;
    flex-basis: 25%;
    outline-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    outline: none;
    border: none;
    border-radius: 7px;
  }

  /* Remove extra left and right margins, due to padding */
  .row {
    margin: 0 -5px;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  @media only screen and (max-width: 767px) {
    .card {
      width: 100%;
      margin-bottom: 10px;
    }
  }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<div id="cardsContainer">
  <div class="row">
    <div class="card-group">
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.gdle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.glde/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.dgle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posdts.gle/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.gdle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.gle/ndTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posdts.gle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.dgle/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

P粉509383150
P粉509383150

membalas semua(1)
P粉677573079
P粉6775730792024-04-06 00:53:11 Tingkat 1

Sila baca Dokumentasi Bootstrap pada kelas responsif, saya menggunakannya (col-md-6) dalam kod ini untuk memaparkan dua kad bermula dari tablet dan 4 kad pada skrin yang lebih besar (col-xl-3)

Puisi. Saya membersihkan kod dan menambah meta viewport, yang penting untuk tontonan mudah alih! 

#cardsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    overflow: hidden;
    /*height: 1000px; WHY?*/
  }

  .card {;
    font-size: 12px;
    border-radius: 5px !important;
    flex-basis: 25%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    outline: none;
    border: none;
    border-radius: 7px;
    flex-direction: inherit!important;
  }

  /* .row {
    margin: 0 -5px;
  }
  .row:after {
    content: "";
    display: table;
    clear: both;
  } */

  @media only screen and (max-width: 767px) {
    .card {
      width: 100%;
      margin-bottom: 10px;
    }
  }


  
    
    
    

    
    

    Hello, world!
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan