中心卡但左对齐？

Question

我在流体容器中展示了数量未知的固定尺寸卡片。我希望行居中，但当填充一行的卡片数量不均匀时就会出现问题。它将在一行中居中放置两张卡片，显示 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}

Answer 1

您最好使用 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

Answer 2

我发现这个例子我认为可以满足我的需求。我不太确定它在做什么，我以前从未处理过 scss。// Bootstrap 4 breakpoints & gutter$grid-breakpoints: (&nbsp; &nbsp; xs: 0,&nbsp; &nbsp; sm: 576px,&nbsp; &nbsp; md: 768px,&nbsp; &nbsp; lg: 992px,&nbsp; &nbsp; xl: 1200px) !default;$grid-gutter-width: 30px !default;// number of cards per line for each breakpoint$cards-per-line: (&nbsp; &nbsp; xs: 1,&nbsp; &nbsp; sm: 2,&nbsp; &nbsp; md: 3,&nbsp; &nbsp; lg: 4,&nbsp; &nbsp; xl: 5);@each $name, $breakpoint in $grid-breakpoints {&nbsp; &nbsp; @media (min-width: $breakpoint) {&nbsp; &nbsp; &nbsp; &nbsp; .card-deck .card {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}https://codepen.io/migli/pen/OQVRMw