На данный момент width свойство не будет для .card-deck .card. Вы должны написать width, используя flex-basis и max-width. Код ниже.
.card {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
}
@media (min-width: 576px){
.card {
flex-basis: calc(50% - 30px); /* Remove margin from total card width */
flex-grow: 0;
flex-shrink: 0;
max-width: calc(50% - 30px); /* Remove margin from total card width */
}
}
@media (min-width: 768px) {
.card {
flex-basis: calc(33.3333% - 30px); /* Remove margin from total card width */
max-width: calc(33.3333% - 30px); /* Remove margin from total card width */
}
}
@media (min-width: 1200px) {
.card {
flex-basis: calc(25% - 30px); /* Remove margin from total card width */
max-width: calc(25% - 30px); /* Remove margin from total card width */
}
}
Bootstrap установить .card-deck .card css свойство margin-left: 15px;margin-right: 15px;, поэтому карта не идет на полную ширину. На данный момент необходимо удалить margin width из общей карты width.
Вот ручка .
Это не будет хорошо, потому что bootstrap дизайн карты разница. Вы должны изменить html для вышеуказанного дизайна, ему не нужно будет использовать пользовательское свойство css.
Вот перо .
Отредактировано
Bootstrap удалить margin из класса .card, если ширина окна меньше или равна 575.98px То же самое для .card-deck класса удалить display: flex;flex-flow: row wrap;. Если вы хотите две карты в ряд в небольших устройствах. Сделайте так.
.card {
flex-basis: calc(50% - 30px);
flex-grow: 0;
flex-shrink: 0;
margin-left: 15px;
margin-right: 15px;
max-width: calc(50% - 30px);
}
Добавьте d-flex flex-wrap класс с card-deck.
<div class="card-deck d-flex flex-wrap"></div>
Я обновляю перо . Ниже завершено HTML и CSS код.
<div class="container">
<div class="card-deck d-flex flex-wrap">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">2 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">3 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">4 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">5 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">6 Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
CSS
.card-deck .card {
flex-basis: calc(50% - 30px);
flex-grow: 0;
flex-shrink: 0;
margin-left: 15px;
margin-right: 15px;
max-width: calc(50% - 30px);
}
@media (min-width: 768px) {
.card-deck .card {
flex-basis: calc(33.3333% - 30px);
max-width: calc(33.3333% - 30px);
}
}
@media (min-width: 1200px) {
.card-deck .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px);
}
}