css - 卡片在手机中填写容器

Question

所以我使用的是 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>

我再次尝试让卡片在较小的屏幕(移动设备)上填满容器宽度。

Answer 1

据我了解，您想在小屏幕上删除 padding，小屏幕是指小于 34em。在这种情况下，添加此代码:

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

PS:我不建议搞乱 BS 类，所以最好制作额外的类，比如 no-padding-sm，并将这个类添加到你的 col-lg -6 格