每行设置一张卡 Bootstrap 4答案

【问题标题】：Setting one card per row Bootstrap 4每行设置一张卡 Bootstrap 4
【发布时间】：2019-03-01 02:14:55
【问题描述】：

我试图让引导程序在小屏幕上每行显示 1 张卡片，在中屏幕上每行显示 2 张卡片，在大屏幕上每行显示 3 张卡片。

我正在尝试使用 <div class="col-sm-12 col-md-6 col-lg-4"> 执行此操作，它适用于中型和大尺寸屏幕，但对于小尺寸屏幕，它仍然显示 2，而不是每行 1 张卡片。

我还想让导航栏在最小尺寸的屏幕上移动到顶部，并在所有其他尺寸上保持在左侧。我相信这与卡片的问题相同。

这是我的代码的链接：https://codepen.io/anon/pen/ZPQWKd

【问题讨论】：

您的代码正在运行。再次检查！
真的吗？也许问题出在chrome调试器上？你是如何确认它工作正常的？
我已经检查了你的 codepen 并尝试在其中调整大小
哦，好的，太好了，我猜是 chrome 调试器

标签： html css bootstrap-4

【解决方案1】：

对于手机你可以尝试使用 col-xs 类..

所以改为

<div class="col-sm-12 col-md-6 col-lg-4">

你可以使用

<div class="col-sm-12 col-md-6 col-lg-4 col-xs-12">

您可以在此处查看更多文档https://getbootstrap.com/docs/4.1/layout/grid/

【讨论】：

真的吗？顺便说一句，对于响应式侧边栏，您可以试试这个codeply.com/go/Rgq96HykJ2/sidebar-that-changes-to-navbar

【解决方案2】：

在 Bootstrap-4 中，对小型设备使用 col-{number} 类

示例：col-12：小型设备中的 12 列网格

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="row">
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
           <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

       </div>
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
       <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549805308-061c5e00ff9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
       </div>
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
       <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549948558-1c6406684186?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
       
       </div>
    </div>

  </body>
</html>

【讨论】：

我也试过了，但是当我在 chrome 中使用调试器并调整屏幕大小时，我仍然看到 2 而不是 1。

【解决方案3】：

希望这对您有所帮助.. 如果这是您正在寻找的内容，我会添加解释。谢谢

https://codepen.io/Xenio/pen/KEVazw?editors=110088

【讨论】：