如何修复以下代码以允许 bootstrap 5.3 中提供的卡具有移动响应能力？

How do I fix the following code to allow the cards offered in bootstrap 5.3 to be mobile responsive?

提问人：Pink3brain 提问时间：11/15/2023 更新时间：11/16/2023 访问量：38

问：

'我不知道以下代码做错了什么。我一直在尝试编辑它，我觉得我让它变得更糟。我无法弄清楚我在引导程序中设置容器、行和列时做错了什么。我正在使用带有图像的卡片。我对桌面部分的外观感到满意。但是，当我在移动设备中更改屏幕以检查它时，容器中的项目不会一次缩小到屏幕上的一两个图像，从而允许上下滚动以查看所有带有图像的卡片。这是一个非常基本的电子商务网站。我正在学习，所以我非常感谢那些愿意提供帮助的人的任何观点、提示和建议。谢谢！

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="keywords"content="breweryfx, Lancaster PA, best, beer, beer collectibles, bar, brewery, ale, lager, signs, trays, bottles, cans, coasters, labels" />
    <meta name="description" content="Buying and selling the best beer collectibles in Lancaster PA">

    <title>BreweyFX - Lancaster, PA</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <link href="base_layout.css" rel="stylesheet" />
    <link href="home_layout.css" rel="stylesheet" />

</head>



<body>
    <header>
        <img class="img-fluid" src="Images/Home/brewfxcropsigns31.jpg" alt="home page image" id="bannerheader">
        <nav class="navbar navbar-expand-sm bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">BreweryFX</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="Index.html">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerBottles.html">Beer Bottles</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerCans.html">Beer Cans</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerSigns.html">Beer Signs</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_Coasters.html">Coasters</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_Trays.html">Trays</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_Labels.html">Labels</a>
                  </li>
                </ul>
                <form class="d-flex" role="search">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>
    </header>

    <section>
        <h1><i>Home</i></h1>

        <p><b>WE BUY & SELL BEER SIGNS</b></p>
        <p>Email us if you have something to sell at <a href="mailto:[email protected]">[email protected]</a>. Thanks!</p>
        <div class="container">
          <div class="card border-dark mb-3" style="width: 18rem;">
            <img src="Images/Home/unnamed-16.jpg" class="img-size" alt="Lancaster barrel">
            <div class="card-body">
              <h5 class="card-title">Lancaster barrel</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
          <div class="card border-dark mb-3" style="width: 18rem;">
            <img src="Images/Home/image13.jpeg" class="img-size" alt="Sprenger Lager">
            <div class="card-body">
              <h5 class="card-title">Sprenger Lager</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
          <div class="card border-dark mb-3" style="width: 18rem;">
            <img src="Images/Home/unnamed-14.jpg" class="img-size" alt="Riekers">
            <div class="card-body">
              <h5 class="card-title">Riekers</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        
        <p><a href="#bannerheader">Return to the top</a></p>
    </section>

    <footer>
        <p><i><b>Breweryfx.com</b> &#9830 Email: <a href="mailto:[email protected]">[email protected]</a> &#9830
                Phone: <a href="tel:717-368-7111">(717)-368-7111</a> &#9830 Address: <a
                    href="http://maps.google.com/maps?oi=map&amp;q=677+Estelle+Drive,+17601">677 Estelle
                    Dr, Lancaster, PA 17601</a></i></p>
    </footer>

</body>

</html>


/* Coasters.html */

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="breweryfx, Lancaster PA, best, beer, beer collectibles, bar, brewery, ale, lager, coasters" />
    <meta name="description" content="Buying and selling the best beer collectibles in Lancaster PA">
    <title>BreweyFX - Coasters</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <link href="base_layout.css" rel="stylesheet" />
    <link href="shop_layout.css" rel="stylesheet" />
    <link href="home_layout.css" rel="stylesheet" />
   
</head>

<body>
  <header>
    <img class="img-fluid" src="Images/Home/brewfxcropsigns31.jpg" alt="home page image" id="bannerheader">
    <nav class="navbar navbar-expand-sm bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">BreweryFX</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="Index.html">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerBottles.html">Beer Bottles</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerCans.html">Beer Cans</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerSigns.html">Beer Signs</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active" href="BFX_Coasters.html">Coasters</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_Trays.html">Trays</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_Labels.html">Labels</a>
                  </li>
                </ul>
                <form class="d-flex" role="search">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>
  </header>
  <section>
    <h1><i>Coasters</i></h1>
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="card" style="width: 12rem;">
            <img src="Images/Coasters/dscn0990-296x296.jpg" class="img-size-coasters" alt="Del Mar Va Coaster">
            <div class="card-body">
              <h5 class="card-title">Del Mar Va</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card" style="width: 12rem;">
            <img src="Images/Coasters/Gibbons-894x894.jpg" class="img-size-coasters" alt="Gibbons Coaster">
            <div class="card-body">
              <h5 class="card-title">Gibbons</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card" style="width: 12rem;">
            <img src="Images/Coasters/gretz-882x882.jpg" class="img-size-coasters" alt="Gretz Coaster">
            <div class="card-body">
              <h5 class="card-title">Gretz</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card" style="width: 12rem;">
            <img src="Images/Coasters/Lebanon-Valley-900x876.jpg" class="img-size-coasters" alt="Lebanon Valley Coaster">
            <div class="card-body">
              <h5 class="card-title">Lebanon Valley</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card" style="width: 12rem;">
            <img src="Images/Coasters/DSCN0989-897x897.jpg" class="img-size-coasters" alt="Old Munchner Coaster">
            <div class="card-body">
              <h5 class="card-title">Old Munchner</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card" style="width: 12rem;">
            <img src="Images/Coasters/Old-Reading-900x877.jpg" class="img-size-coasters" alt="Old Reading Coaster">
            <div class="card-body">
              <h5 class="card-title">Old Reading</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card" style="width: 12rem;">
            <img src="Images/Coasters/oldreadingdutch-900x623.jpg" class="img-size-coasters" alt="Old Reading Coaster">
            <div class="card-body">
              <h5 class="card-title">Old Reading</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <p><a href="#bannerheader">Return to the top</a></p>
  </section>
  <footer>
    <p><i><b>Breweryfx.com</b> &#9830 Email: <a href="mailto:[email protected]">[email protected]</a> &#9830
            Phone: <a href="tel:717-368-7111">(717)-368-7111</a> &#9830 Address: <a
                href="http://maps.google.com/maps?oi=map&amp;q=677+Estelle+Drive,+17601">677 Estelle
                Dr, Lancaster, PA 17601</a></i></p>
  </footer>
    
</body>

</html>


/* CSS Code Home Layout */

/* CSS Style Sheet for BreweryFX Home Page */



html {
    height: 100%;
    margin: 0 6% 0 6%;
    padding: 0;
    border: 0;
    background-color: rgb(255, 174, 0);
}

body {
    margin: 0px auto auto auto;
    width: 100%;
    background-color: white;
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 1.7vw;
    font-weight: 500;
}

body>section>h1 {
    font-size: 4.5vw;
    padding-left: 4%;
    padding-top: .5%;
    margin-top: 0%;
    margin-bottom: 1%;
}

body>section>p {
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    margin-bottom: 2%;
    text-align: center;
    font-size: 1.5vw;
}
footer{
    display: flex;
    color: white;
    justify-content: center;
    align-content: center;
    background-color: rgb(255, 174, 0);
}

.container{
    display: flex;
    justify-content: center;
    align-content: center;
}
.card{
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.card-title{
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 1.1vw;
    color: black ;
}
.card-price{
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 1.1vw;
    color: blue;
}
.img-size{
    width: 100%;
    height: 28vw;
}
.img-size-bottles{
    width: 100%;
    height:22vw
}

.img-size-cans{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;

}
.container-bottles{
    display:grid;
    
}
.img-size-sign{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    
}
.img-size-coasters{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.img-size-tray{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.img-fluid{
    width: 100%;
    height: 100%;
}
.navbar-expand-sm{
    display:flex;
    flex-wrap: wrap;
}



/* CSS Code Base Layout */

/* CSS File for BreweryFX Base */


html {
    height: 100%;


    margin: 0 8% 0 8%; padding: 0; border: 0;
    background-color: rgb(255, 174, 0);
}

body {
    margin: 0px auto auto auto;
    width: 100%;
    background-color: white;
    font-family: Helvetica, Arial, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 28px;
    font-weight: 500;
}

body > section > header{
    font-size: 90px;
    padding-left: 2%;
    padding-top: .5%;
}

body > section > p{
    display: flex;
    justify-content: center;
    align-content: center;
}
HTML CSS sass bootstrap-5 响应式图像

评论

0赞 Abisha 11/15/2023
删除卡宽度并使用 .col-md-2 col-3 调整卡宽度

答：

0赞 Abisha 11/15/2023 #1

试试这个：

html {
    height: 100%;
    margin: 0 6% 0 6%;
    padding: 0;
    border: 0;
    background-color: rgb(255, 174, 0);
}

body {
    margin: 0px auto auto auto;
    width: 100%;
    background-color: white;
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 1.7vw;
    font-weight: 500;
}

body>section>h1 {
    font-size: 4.5vw;
    padding-left: 4%;
    padding-top: .5%;
    margin-top: 0%;
    margin-bottom: 1%;
}

body>section>p {
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    margin-bottom: 2%;
    text-align: center;
    font-size: 1.5vw;
}
footer {
    display: flex;
    color: white;
    justify-content: center;
    align-content: center;
    background-color: rgb(255, 174, 0);
}

.container {
    display: flex;
    justify-content: center;
    align-content: center;
}
.card {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.card-title {
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 1.1vw;
    color: black;
}
.card-price {
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 1.1vw;
    color: blue;
}
.img-size {
    width: 100%;
    height: 28vw;
}
.img-size-bottles {
    width: 100%;
    height: 22vw
}

.img-size-cans {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;

}
.container-bottles {
    display: grid;

}
.img-size-sign {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;

}
.img-size-coasters {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.img-size-tray {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.img-fluid {
    width: 100%;
    height: 100%;
}
.navbar-expand-sm {
    display: flex;
    flex-wrap: wrap;
}

/* CSS Code Base Layout */

/* CSS File for BreweryFX Base */


html {
    height: 100%;
    margin: 0 8% 0 8%; padding: 0; border: 0;
    background-color: rgb(255, 174, 0);
}

body {
    margin: 0px auto auto auto;
    width: 100%;
    background-color: white;
    font-family: Helvetica, Arial, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 28px;
    font-weight: 500;
}

body > section > header {
    font-size: 90px;
    padding-left: 2%;
    padding-top: .5%;
}

body > section > p {
    display: flex;
    justify-content: center;
    align-content: center;
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="breweryfx, Lancaster PA, best, beer, beer collectibles, bar, brewery, ale, lager, coasters" />
    <meta name="description" content="Buying and selling the best beer collectibles in Lancaster PA">
    <title>BreweyFX - Coasters</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <link href="base_layout.css" rel="stylesheet" />
    <link href="shop_layout.css" rel="stylesheet" />
    <link href="home_layout.css" rel="stylesheet" />

</head>

<body>
  <header>
    <img class="img-fluid" src="Images/Home/brewfxcropsigns31.jpg" alt="home page image" id="bannerheader">
    <nav class="navbar navbar-expand-sm bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">BreweryFX</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="Index.html">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerBottles.html">Beer Bottles</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerCans.html">Beer Cans</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_BeerSigns.html">Beer Signs</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active" href="BFX_Coasters.html">Coasters</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_Trays.html">Trays</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="BFX_Labels.html">Labels</a>
                  </li>
                </ul>
                <form class="d-flex" role="search">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>
  </header>
  <section>
    <h1><i>Coasters</i></h1>
    <div class="container">
      <div class="row">
        <div class="col-md-2 col-6 p-1">
          <div class="card h-100">
            <img src="Images/Coasters/dscn0990-296x296.jpg" class="img-size-coasters" alt="Del Mar Va Coaster">
            <div class="card-body">
              <h5 class="card-title">Del Mar Va</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 col-6 p-1">
          <div class="card h-100" >
            <img src="Images/Coasters/Gibbons-894x894.jpg" class="img-size-coasters" alt="Gibbons Coaster">
            <div class="card-body">
              <h5 class="card-title">Gibbons</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 col-6 p-1">
          <div class="card h-100">
            <img src="Images/Coasters/gretz-882x882.jpg" class="img-size-coasters" alt="Gretz Coaster">
            <div class="card-body">
              <h5 class="card-title">Gretz</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 col-6 p-1">
          <div class="card h-100" >
            <img src="Images/Coasters/Lebanon-Valley-900x876.jpg" class="img-size-coasters" alt="Lebanon Valley Coaster">
            <div class="card-body">
              <h5 class="card-title">Lebanon Valley</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 col-6 p-1">
          <div class="card h-100" >
            <img src="Images/Coasters/DSCN0989-897x897.jpg" class="img-size-coasters" alt="Old Munchner Coaster">
            <div class="card-body">
              <h5 class="card-title">Old Munchner</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 col-6 p-1">
          <div class="card h-100">
            <img src="Images/Coasters/Old-Reading-900x877.jpg" class="img-size-coasters" alt="Old Reading Coaster">
            <div class="card-body">
              <h5 class="card-title">Old Reading</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>
        <div class="col-md-2 col-6 p-1">
          <div class="card h-100" >
            <img src="Images/Coasters/oldreadingdutch-900x623.jpg" class="img-size-coasters" alt="Old Reading Coaster">
            <div class="card-body">
              <h5 class="card-title">Old Reading</h5>
              <p class="card-price">$0.00</p>
            </div>
          </div>
        </div>

      </div>
    </div>
    <p><a href="#bannerheader">Return to the top</a></p>
  </section>
  <footer>
    <p><i><b>Breweryfx.com</b> &#9830 Email: <a href="mailto:[email protected]">[email protected]</a> &#9830
            Phone: <a href="tel:717-368-7111">(717)-368-7111</a> &#9830 Address: <a
                href="http://maps.google.com/maps?oi=map&amp;q=677+Estelle+Drive,+17601">677 Estelle
                Dr, Lancaster, PA 17601</a></i></p>
  </footer>

</body>

</html>

另请参阅 Bootstrap 文档：网格卡

评论

0赞 Pink3brain 11/16/2023
谢谢，我实际上只是报废了它并重新开始。我解决了我遇到的问题。感谢您的回复！我很感激你的帮助。您碰巧知道如何将图标添加到切换项吗？我正在阅读引导程序文档，但无法真正找到明确的答案。当我尝试将图像添加到锚点元素时，它也在桌面模式下将其添加到导航栏中。我正在考虑附加一个单独的jQuery，以将其链接到单独的移动html工作表。但是，我希望避免这样做。有什么建议吗？
0赞 Abisha 11/16/2023
我无法清楚地理解您的错误情况？您是否在询问导航栏中菜单项的切换图标？

上一个：使用 scss 基本文件在 angular 中实现自定义暗模式

下一个：我在宽度上使用 sass min 函数 - min（100% - 40px ， 1000px）;但是映射的 CSS 文件显示 min 函数的无效属性值