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;
  }
}

我的媒体查询似乎无效。（我确实将我的CSS导入了style.css）

electron-windows-notifications

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>

您可以编辑或预览代码Here on JSFiddle

引导卡网格故障

1 个答案: