2 回答

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
您最好使用 Bootstrap 的.row-cols
類,而不是嘗試改變.card-deck
編寫的方式,特別是如果您不熟悉這方面的事情。網(wǎng)格卡(使用.row-cols
)對(duì)于 Bootstrap 來說相對(duì)較新。它們?cè)试S您根據(jù)屏幕尺寸選擇每行上想要多少列/卡。列將換行,任何不完整的行都會(huì)從左到右構(gòu)建其列/卡片,這聽起來像是您想要實(shí)現(xiàn)的目標(biāo)。
由于您有固定寬度的卡片,您希望將其放置在列的中央,因此您要么需要添加.mx-auto
到卡片中,要么添加margin-left:auto; margin-right: auto;
到您的.game-card
班級(jí)中。我更喜歡后者,但這取決于你。
查看下面的代碼筆以獲取編碼示例......
https://codepen.io/the_real_andrew/pen/vYOVMzo

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
我發(fā)現(xiàn)這個(gè)例子我認(rèn)為可以滿足我的需求。我不太確定它在做什么,我以前從未處理過 scss。
// Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$grid-gutter-width: 30px !default;
// number of cards per line for each breakpoint
$cards-per-line: (
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5
);
@each $name, $breakpoint in $grid-breakpoints {
@media (min-width: $breakpoint) {
.card-deck .card {
flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
}
}
}
https://codepen.io/migli/pen/OQVRMw
- 2 回答
- 0 關(guān)注
- 115 瀏覽
添加回答
舉報(bào)