卡片在移动设备中填写容器

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

这是我的卡片索引.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-6div