Question

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

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

我还希望导航栏在最小尺寸的屏幕上移至顶部，而在所有其他尺寸的屏幕上均保留在左侧。我相信这和卡片是一样的问题。

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

Answer 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/

Answer 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>

Answer 3

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

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

每行设置一张卡Bootstrap 4

3 个答案: