媒体查询bootstrap4

如何解决媒体查询bootstrap4

我有这个设置，我正在尝试学习媒体查询，但是我真的不明白如何在较小的设备上将它们放大。当我尝试使用列进行不同的媒体查询时，一切都搞砸了。因为它是在台式机上，所以我有3行4列，我想在移动设备上将其显示在另一行的下方。因为它在我的浏览器中，它会按照我想要的方式调整大小，但是在我的手机上却没有。

<div class="container mt-4">
<% @ads.in_groups_of(4,false).each do |group| %>
  <div class='row'>
    <% group.each do |ad| %>
      <div class='col-md-3'>
      <div class="card-deck">
      <div class="card mt-3">
      <img class="card-img-top" src='<%= url_for(ad.photos[0])%>' max-width: auto alt="Card image cap"> 
      <div class="card-body ">
        <h5 class="card-title"> <%= ad.title %> </h5>
        <p class="card-text"><%= truncate(ad.description,:length => 30)%></p>
        <p class="card-text"><%= ad.area %></p>
        <a href="#" class="card-link" mb-5><%= ad.contact %></a>
        
        </div>
        <%= link_to 'Show',ad %>
        <br>
    <div class="card-footer">
        <small>Created <%= time_ago_in_words(ad.created_at) %> ago </small>
    </div>
        </div>
    </div>
      </div>
    <% end %>
  </div>
<% end %>
</div>

这是一段视频，希望它能对您有帮助

https://drive.google.com/file/d/1BzPAKI0i7uIilmag67s9s3o3tivPn8mQ/view?usp=sharing

解决方法

制作一个大窗口。扩大和缩小您的内心内容并享受。需要注意的一点是，当屏幕尺寸

body {
  overflow-x: hidden;
  background: #f5f3ef;
  margin-top: 4rem;
}

.container-custom-nav {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media(min-width:768px) {
  .container-custom-nav {
    max-width: 768px;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media(min-width:1024px) {
  .container-custom-nav {
    max-width: 1024px;
  }
}

@media(min-width:1280px) {
  .container-custom-nav {
    max-width: 1280px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.products-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 0.75rem;
}

@media(min-width:1024px) {
  .products-grid-view {
    gap: 0.875rem;
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
  }
}

.product-cards {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;
  background: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0.075);
  transition: all 0.45s ease-in-out;
}

.product-cards::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  opacity: 0;
  box-shadow: 0 0.0px 0.6px rgba(0,0.135),0 0.0px 1.3px rgba(0,0.118),0 0.0px 2.2px rgba(0,0.103),0 0.2px 3.3px rgba(0,0.093),0 0.8px 4.8px rgba(0,0.083);
  transition: opacity 0.45s ease-in-out;
}

.product-cards:hover {
  transform: scale(1.0625,1.0625);
  cursor: pointer;
}

.product-cards:hover::after {
  opacity: 1;
}

.product-cards .img-body {
  padding: 1rem;
}

@media(min-width:1280px) {
  .product-cards .img-body {
    padding: 1.125rem;
  }
}

.product-cards .img-body img {
  width: 100%;
  height: auto;
  border-radius: 0.125rem;
}

.product-cards .desc {
  flex: 1 1 auto;
  text-align: center;
  padding: 1rem 0.75rem 1.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.025rem;
  font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

.product-cards .price {
  text-align: center;
  margin-bottom: auto;
  padding: 0 0 2.5rem 0;
  font-family: 'Segoe UI',sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
}

<body class="container-custom-nav">
  <div class="products-grid-view">

    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>

  </div>
</body>

如何解决媒体查询bootstrap4

解决方法

相关推荐