css 我不想每张牌都有相同的高度....我想在两张小牌后面再放两张牌，但不知道怎么做

ddrv8njm 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(104)

like this我不想每张牌都有相同的高度....我想在两张小牌后面再放两张牌，但不知道怎么做

<!DOCTYPE html>
     <html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="styles/style.css" />
  <title>Shelby News</title>
</head>

<body style="background-color: lightcyan">
  <div class="container">
    <div class="row d-flex flex-row justify-content-center">
      <div class="col-lg-6 col-md-6">
        <div class="card bg-inverse card-bg-zoom">
          <img class="card-img" src="images/business.jpg" alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">
              SOME SAMPLE TEXT FOR CARD Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Facere eos eveniet, cupiditate
              modi similique suscipit
            </h4>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card bg-inverse card-bg-zoom">
          <img class="card-img" src="images/business.jpg" alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">SOME SAMPLE TEXT FOR CARD</h4>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card bg-inverse card-bg-zoom">
          <img class="card-img" src="images/business.jpg" alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">SOME SAMPLE TEXT FOR CARD</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</html>

我想把2更多的卡以下两个小卡，但不知道如何做到这一点。我正在使用引导行和列类以及我想这是响应，

css

来源：https://stackoverflow.com/questions/75552788/i-dont-want-each-card-with-same-height-i-wanna-put-2-more-cards-following-tw

1条答案

按热度按时间

fiei3ece1#

试试这个：

<!DOCTYPE html>
     <html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="styles/style.css" />
  <title>Shelby News</title>
</head>

<body style="background-color: lightcyan">
  <div class="container">
    <div class="row d-flex flex-row justify-content-center">
      <div class="col-lg-6 col-md-6">
        <div class="card bg-inverse card-bg-zoom">
          <img class="card-img" src="https://picsum.photos/300/200?image=611"  alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">
              SOME SAMPLE TEXT FOR CARD Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Facere eos eveniet, cupiditate
              modi similique suscipit
            </h4>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card bg-inverse card-bg-zoom" style="margin-bottom:12px">
          <img class="card-img" src="https://picsum.photos/300/200?image=611"  alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">SOME SAMPLE TEXT FOR CARD</h4>
          </div>
        </div>
          <div class="card bg-inverse card-bg-zoom">
          <img class="card-img" src="https://picsum.photos/300/200?image=611"  alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">SOME SAMPLE TEXT FOR CARD</h4>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card bg-inverse card-bg-zoom" style="margin-bottom:12px">
          <img class="card-img" src="https://picsum.photos/300/200?image=611"  alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">SOME SAMPLE TEXT FOR CARD</h4>
          </div>
        </div>
          <div class="card bg-inverse card-bg-zoom">
          <img class="card-img" src="https://picsum.photos/300/200?image=611"  alt="Card image cap" />
          <div class="card-img-overlay h-100 d-flex flex-column justify-content-end overlay">
            <h4 class="card-title">SOME SAMPLE TEXT FOR CARD</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</html>

赞(0）回复(0）举报 2023-02-26

我来回答

css 我不想每张牌都有相同的高度....我想在两张小牌后面再放两张牌，但不知道怎么做

1条答案

相关问题

热门标签

最新问答