个人中心
gpt4 book ai didi

html - Bootstrap 响应式卡片

转载 作者：行者123 更新时间：2023-12-05 04:47:05 25 4
gpt4 key购买 nike

我正在尝试学习 flexbox。我想用 Bootstrap 设计响应式卡片。在图片中显示的 4 张卡片中，2 张应该出现在底部，另外两张出现在顶部，但在手机上它们应该都在底部。我尝试了一些但没有奏效。我该怎么办？

enter image description here

谢谢。

.card{
    display: flex;
    flex-wrap: wrap;
}



@media (max-width: 500px) {
   .card{
    flex-direction: row;
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>A</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>



<div class="container" style="margin-top: 50px;">
    <div class="card-deck">
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">1 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">2 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>


        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">3 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>

        <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">4 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        

    </div>
</div>








<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>

最佳答案

  1. 使用 col 使卡片响应，不要忘记将 .d-flex .flex-wrap 添加到容器中。
  2. col-12 col-md-6 col-lg-3 是您可以使用的布局。 col-12 是 mobile first 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section class='container d-flex flex-wrap border p-2'>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
</section>

关于html - Bootstrap 响应式卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68602074/

25 4 0
文章推荐： bitbucket - 为什么个人访问 token 不适用于 Bitbucket REST API？
文章推荐： python - boto3 在通过 python 上传文件时给出拒绝访问错误
文章推荐： Matlab 中的 Python zip 函数
文章推荐： docker - 如何在运行 Nginx 的 Docker 容器中实现 Fail2Ban
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com