卡片填写手机中的容器答案

【问题标题】：Cards fill out container in mobile卡片填写手机中的容器
【发布时间】：2023-03-27 10:11:01
【问题描述】：

所以我使用 Bootstrap 4“alpha3”。我喜欢台式机的设置，但是在使用移动设备时遇到了问题。桌面上的卡片和容器末端之间有一些空间，这很好。但我想要的是当我使用移动设备时，我希望卡片的宽度能够占据整个容器。这是我的帖子的scss

@media screen and (min-width: 34em) {
.posts.index .card {
 height: 425px;
 width: 100%;
 }
}

@media screen and (min-width: 48em) {
.posts.index .card {
height: 430px;
 }
}

@media screen and (min-width: 75em) {
.posts.index .card {
height: 440px;
 }
}

这是我的卡片 index.html.erb

 <div class= 'col-lg-6'>
  <div class="card">
    <%= link_to post do %>
  <div class="card-topper" style='background-image: url(<%= post.banner_image_url %>);'></div>
   <% end %>
  <div class="card-block">
    <h4 class="card-title"><%= link_to post.title, post %></h4>
    <h6 class="published-date"><%= post.display_day_published %></h6>
    <%= link_to post do %>
    <p class="card-text"><%= truncate(post.description, length: 130) %></p>
  <% end %>
</div>
</div>
</div>

所以我再次尝试让卡片在较小的屏幕（移动设备）上填充容器宽度。

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap mobile

【解决方案1】：

据我了解，您想在小屏幕上删除 padding，而小屏幕的意思是小于 34em。在这种情况下，添加以下代码：

@media (max-width: 34em) {
  .col-lg-6 {
    padding-left:0;
    padding-right:0;
  }
}

PS：我不建议把 BS 课程弄乱，所以最好做额外的课程，比如 no-padding-sm，并将这个课程添加到你的 col-lg-6 div 中

【讨论】：