社区 学习 工具库 休闲
搜索
简体中文
我如何调整这些卡，使其能够使用 Boostrap 4 做出响应？
P粉509383150
P粉509383150 2024-04-05 10:48:45
0
1
4856

如何让每个 row 显示 4 张卡片，当然，如果屏幕尺寸发生变化，则使它们堆叠起来。理想情况下，它们之间应该有一些空间。我已经尝试了我能研究的所有可能的组合。

#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

全部回复(1)
P粉677573079
P粉6775730792024-04-06 00:53:11 1 楼

请阅读有关响应式类的引导文档 ，我在此代码中使用了它们 (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!
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板