第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

中心卡但左對(duì)齊?

中心卡但左對(duì)齊?

幕布斯7119047 2023-10-10 14:59:21
我在流體容器中展示了數(shù)量未知的固定尺寸卡片。我希望行居中,但當(dāng)填充一行的卡片數(shù)量不均勻時(shí)就會(huì)出現(xiàn)問題。它將在一行中居中放置兩張卡片,顯示 5 張卡片。我希望這兩張卡向左對(duì)齊,以便所有內(nèi)容都保持垂直內(nèi)聯(lián)。如果我將所有內(nèi)容都向左對(duì)齊,那么我最終會(huì)在外列的左側(cè)和右側(cè)出現(xiàn)不均勻的邊距。例如,屏幕寬度可能只能連續(xù)顯示 4 張卡片,但要填充的左右間距可以是 0 到 300 像素(卡片的大?。┲g的任意值。希望這是有道理的。如果沒有,我會(huì)畫圖來說明我的意思。https://www.codeply.com/p/pOnFgE1lTs<div class='container-fluid'>    <div class='row'>        <div class='col-md-10 offset-md-1'>            <div class='card-deck'>                <!-- repeat this block for X-number of cards -->                <div class="card mb-4 game-card mx-auto">                    <img class="card-img-top" src="#">                    <div class="card-body text-center">                        <h4 class="card-title text-center">Game Title</h4>                        <p class="card-text" style="text-align:justify">title here</p>                        <a href="" class="btn btn-sm btn-primary">View</a>                    </div>                </div>            </div>        </div>    </div></div>.game-card{max-width:300px;width:300px;min-width:300px}
查看完整描述

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


查看完整回答
反對(duì) 回復(fù) 2023-10-10
?
慕虎7371278

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


查看完整回答
反對(duì) 回復(fù) 2023-10-10
  • 2 回答
  • 0 關(guān)注
  • 115 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)