BS4减少移动设备上2层网格卡之间的填充 [英] BS4 Reduce Padding Between 2-Up Grid Cards on Mobile

问题描述

我有一个bootstrap-4页面网格卡.在移动设备(col)上，我希望它们显示2，但卡之间的填充比外面的两倍.这是两张纸牌之间左右两张纸牌相接的结果.

I have a bootstrap-4 page grid cards. On mobile devices (col), I would like them to display 2 up, but I get twice the padding between the cards than I do on the outside. This is the result of the left and right card padding meeting in between the two cards.

因为卡的数量可以从1到99不等，所以我不确定如何减少内部填充以使情况变得平淡.参见图片:绿色为左和右填充.灰色是卡片区域.

Because the number of cards can vary from 1 to 99 I am not sure how to reduce the inner padding to even things out. See image: Green is left and right padding. Gray is the card area.

推荐答案

将此css尝试到您具有填充功能的卡片元素上，它将仅移除右侧卡片的左侧填充物，并从所有侧面为您提供相同的填充物

try this css to your card element that has padding, it will remove the padding left only for the right side card and will gives you back same padding from all sides

将此文本替换为填充了您的卡片填充类"的卡片类别

replace this text with your card class that has padding "your-card-padded-class"

your-card-padded-class:nth-child(even) {
    padding-left: 0px !important;
}

这篇关于BS4减少移动设备上2层网格卡之间的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！