html - 引导卡网格的问题

Question

我需要有关 Bootstrap 卡片网格的帮助。

我正在尝试用 6 张卡片制作一个网格。我希望它显示 2 行 3 张卡片，当屏幕较小时减少到 4 行 2 等 .. 直到屏幕很小时得到 1 行 1。

我的 HTML 卡片网格如下所示：

<div class="services">
        <h2>Serviços</h2>
        <div class="cards">

          <div class="card">
            <i class="fa fa-taxi home_icons" aria-hidden="true"></i>
            <h3>Atendimento Preferencial</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

          <div class="card">
            <i class="fas fa-calendar-alt home_icons"></i>
            <h3>Agendamentos</h3>
            <p>Aeroportos <br> Guarulhos, Viracopos, Congonhas</p>
          </div>

          <div class="card">
            <i class="fas fa-hands-helping home_icons"></i>
            <h3>Acompanhamentos</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

          <div class="card">
            <i class="fas fa-language home_icons"></i>
            <h3>Traduçao</h3>
            <p>Português <i class="fas fa-arrows-alt-h"></i> Francês </p>
          </div>

          <div class="card">
            <i class="fas fa-bus home_icons"></i>
            <h3>City Tour / Viagens</h3>
            <p>Interior e Litoral</p>
          </div>

          <div class="card">
            <i class="fas fa-dollar-sign home_icons"></i>
            <h3>Transfer a preço fixo</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

        </div>
      </div>

我的 CSS 看起来像这样：

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
}

.card {
  box-shadow: 0 0px 5px rgba(0,0,0,0.3);
  width:250px;
  text-align: center;
  border-radius: 5px;
}

.card p {
  padding-bottom: 25px;
}

// Smallest device
@media (min-width: 100px) and (max-width: 575px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

看起来我的媒体查询不起作用。（我确实在 style.css 中导入了我的 css）

https://imgur.com/a/iwhvE1z

标签： htmlcssbootstrap-4grid

Answer 1

@LovlsGenesis 这是你的解决方案不需要使用@media屏幕你可以使用引导类

CSS

.card{
  min-height: 240px;
  margin: 5px;
}

.fa-taxi{
  font-size: 70px;
  margin: 20px;
}

.fa-calendar{
  font-size: 70px;
  margin: 20px;
}

.fa-handshake-o{
  font-size: 70px;
  margin: 20px;
}

.fa-globe{
  font-size: 70px;
  margin: 20px;
}

.fa-bus{
  font-size: 70px;
  margin: 20px;
}

.fa-usd{
  font-size: 70px;
  margin: 20px;
}

HTML

<br>
<h2>Serviços</h2>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-taxi" aria-hidden="true"></i>
            <h3>Atendimento Preferencial</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-calendar"></i>
            <h3>Agendamentos</h3>
            <p>Aeroportos <br> Guarulhos, Viracopos, Congonhas</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-handshake-o"></i>
            <h3>Acompanhamentos</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-globe"></i>
            <h3>Traduçao</h3>
            <p>Português <i class="fas fa-arrows-alt-h"></i> Francês </p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-bus"></i>
            <h3>City Tour / Viagens</h3>
            <p>Interior e Litoral</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-usd"></i>
            <h3>Transfer a preço fixo</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>
</div>

您可以在 JSFiddle 上编辑或预览代码