亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

中心卡但左對齊?

中心卡但左對齊?

幕布斯7119047 2023-10-10 14:59:21
我在流體容器中展示了數量未知的固定尺寸卡片。我希望行居中,但當填充一行的卡片數量不均勻時就會出現問題。它將在一行中居中放置兩張卡片,顯示 5 張卡片。我希望這兩張卡向左對齊,以便所有內容都保持垂直內聯。如果我將所有內容都向左對齊,那么我最終會在外列的左側和右側出現不均勻的邊距。例如,屏幕寬度可能只能連續顯示 4 張卡片,但要填充的左右間距可以是 0 到 300 像素(卡片的大小)之間的任意值。希望這是有道理的。如果沒有,我會畫圖來說明我的意思。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貢獻1828條經驗 獲得超3個贊

您最好使用 Bootstrap 的.row-cols類,而不是嘗試改變.card-deck編寫的方式,特別是如果您不熟悉這方面的事情。網格卡(使用.row-cols)對于 Bootstrap 來說相對較新。它們允許您根據屏幕尺寸選擇每行上想要多少列/卡。列將換行,任何不完整的行都會從左到右構建其列/卡片,這聽起來像是您想要實現的目標。

由于您有固定寬度的卡片,您希望將其放置在列的中央,因此您要么需要添加.mx-auto到卡片中,要么添加margin-left:auto; margin-right: auto;到您的.game-card班級中。我更喜歡后者,但這取決于你。

查看下面的代碼筆以獲取編碼示例......

https://codepen.io/the_real_andrew/pen/vYOVMzo


查看完整回答
反對 回復 2023-10-10
?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

我發現這個例子我認為可以滿足我的需求。我不太確定它在做什么,我以前從未處理過 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


查看完整回答
反對 回復 2023-10-10
  • 2 回答
  • 0 關注
  • 120 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號