中心卡但左对齐？

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: (

    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