Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Wie optimiere ich diese Karten, damit sie mit Boostrap 4 reagieren?
P粉509383150
P粉509383150 2024-04-05 10:48:45
0
1
4809

So stellen Sie sicher, dass jede row 4 Karten anzeigt und diese natürlich stapelt, wenn sich die Bildschirmgröße ändert. Idealerweise sollte zwischen ihnen etwas Platz sein. Ich habe jede mögliche Kombination ausprobiert, die ich recherchieren konnte. 

#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

Antworte allen(1)
P粉677573079
P粉6775730792024-04-06 00:53:11 1 Etage

请阅读有关响应式类的引导文档 ，我在此代码中使用了它们 (col-md-6)，以便从平板电脑开始显示两张卡，而在较大的屏幕上显示 4 张卡 (col-xl-3)

诗。我清理了代码并添加了元视口，这对于移动查看很重要！

#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!
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage