所以我使用的是 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>
我再次尝试让卡片在较小的屏幕(移动设备)上填满容器宽度。
最佳答案
据我了解,您想在小屏幕上删除 padding
,小屏幕是指小于 34em
。在这种情况下,添加此代码:
@media (max-width: 34em) {
.col-lg-6 {
padding-left:0;
padding-right:0;
}
}
PS:我不建议搞乱 BS 类,所以最好制作额外的类,比如 no-padding-sm
,并将这个类添加到你的 col-lg -6
格
关于css - 卡片在手机中填写容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44101667/