时间戳

首页 > 解决方案 > Bootstrap v4.4.1 d-md-none 在大屏幕上隐藏项目

html - Bootstrap v4.4.1 d-md-none 在大屏幕上隐藏项目

问题描述

我正在使用 Bootstrap v4.4.1 卡片在大屏幕上显示 3 张卡片，并在中屏幕上隐藏和显示 2 张卡片。我正在使用d-md-none类在 md 屏幕上隐藏第三张卡片，但它在所有屏幕上隐藏第三张卡片。

不知道我做错了什么。

<div class="container  mt-5">
  <div class="row">
    <div class="col-xl-4 col-md-6">
        <div class="card" >
          <img src="images/trophy.jpg" class="card-img-top" alt="...">
          <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>

          </div>
        </div>
    </div>

        <div class="col-xl-4 col-md-6">
        <div class="card" >
          <img src="images/trophy.jpg" class="card-img-top" alt="...">
          <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>
          </div>
        </div>
    </div>

        <div class="col-xl-4 d-md-none">
        <div class="card" >
          <img src="images/trophy.jpg" class="card-img-top" alt="...">
          <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>
          </div>
        </div>
    </div>

  </div>
</div>

https://codepen.io/KGuide/pen/rNVZKmE

标签： htmlcsstwitter-bootstrap

解决方案

添加类d-none d-lg-block

<div class="col-xl-4 d-none d-lg-block">

推荐阅读