Bootstrap карта с фиксированной шириной в столбце (отзывчивая) - PullRequest
Новая
       3

Bootstrap карта с фиксированной шириной в столбце (отзывчивая)

1 голос
/ 12 апреля 2020

У меня есть Bootstrap-card, но есть проблема с width. Я хотел бы, чтобы эта карта заняла полный столбец, который я установил. Вот фрагмент кода, который я использую, и снимок экрана, на котором представлена ​​фактическая ширина и требуемая (с синим фоном).

Вы знаете какое-нибудь хорошее решение, чтобы исправить мою цель? Пожалуйста, примите во внимание отзывчивый вид. 

<div class="row">
    <ng-container *ngFor="let event of events">
        <div class="col-12 col-lg-6 d-flex mt-5">
            <!-- Card -->
            <div class="card shadow-light-lg lift lift-lg">
                <a class="card-body my-auto">
                    <div class="d-flex justify-content-between align-content-center align-items-center py-3">
                        <!-- some content -->
                        <h3 class="mt-auto">
                            {{event.title}}
                        </h3>

                        <div class="mb-0 text-muted" id="card-description">
                            {{event.description}}
                        </div>
                    </div>
                </a>
            </div>
        </div>
        ...
    </ng-container>
</div>

enter image description here

1 Ответ

2 голосов
/ 12 апреля 2020

Ширина не применяется должным образом. Либо дайте ширину 100%. Во-вторых, вы используете display-flex. Таким образом, если у родителя есть flex, то элементы будут иметь соответствующую ширину.

Пожалуйста, поделитесь своим кодом на stackblitz, чтобы мы могли лучше помочь вам. Отладка будет намного проще.

...