为了账号安全,请及时绑定邮箱和手机立即绑定

中心卡但左对齐?

中心卡但左对齐?

幕布斯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 关注
  • 50 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信