中心卡，但左对齐？

Question

我在液体容器中显示了未知数量的固定尺寸卡。我希望行居中，但问题是当行中填充的卡片数量不均时出现。它将在一行中的两张卡的中间显示5张卡。我想让这2张牌向左对齐，以便一切都保持垂直内联。如果将所有内容都向左对齐，那么最终我可能会在外侧列的左侧和右侧出现不均匀的边距。例如，屏幕宽度可能只有空间可以连续显示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

我找到了这个例子，我认为它将满足我的需求。我还不太确定它在做什么，我以前从未处理过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

Answer 2

[最好使用Bootstrap的.row-cols类，而不是尝试更改.card-deck的编写方式，特别是如果您不熟悉这方面的话。 Grid Cards（使用.row-cols）对于Bootstrap来说是较新的。它们使您可以根据屏幕尺寸选择每行要多少列/卡。列将换行，任何不完整的行将具有从左到右构建的列/卡，这听起来像是您要实现的目标。

由于您有固定宽度的卡要在其列中居中放置，您需要在卡中添加.mx-auto或在margin-left:auto; margin-right: auto;类中添加.game-card。我希望后者，但在那方面取决于您。

查看下面的代码库以获取编码示例...

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