центральные карты, но с левым обоснованием?

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

Я нашел этот пример, который, я думаю, удовлетворит мои потребности. Я не совсем уверен, что он делает, я никогда не имел дело с s css раньше.

// 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