我在模态上使用引导4卡。问题是，无论我使用多少张卡片，它都会将它们全部排成一排。我要连续最多3张卡。第二个问题是，当我调整尺寸时，卡片太紧且无法穿透。
我尝试使用
display: inline-block;
但是没有用。
<div class="portfolio-modal mfp-hide" id="labrador-modal">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="card-group">
<div class="card" style="margin-right: 10px;">
<img class="card-img-top" src="img/labradorok/Russel/1.jpg" alt="Russel">
<div class="card-body">
<h5 class="card-title">Midnight Sun Sea Romance "Russel"</h5>
<p class="card-text">
<ul class="list-group list-group-flush">
<li class="list-group-item">Színe: Fekete/Black</li>
<li class="list-group-item">Születési idő: 2007.11.24.</li>
<li class="list-group-item">Csípő: HD-A (free)</li>
<li class="list-group-item">Könyök: 0-0 (mentes / free)</li>
<li class="list-group-item">Szem: mentes (free)</li>
<li class="list-group-item">prcd-PRA: mentes (szülők által)</li>
<li class="list-group-item">EIC: mentes (free)</li>
<li class="list-group-item">Képességvizsga: vizsga ideje: 2013.04.20.</li>
</ul>
<div class="btn-group mr-2" role="group" aria-label="First group" style="margin-top:10%;">
<a class="btn btn-primary" href="img/torzskonyvek/Midnight-Sun-See-Romance-pedigree.pdf" role="button">Törzskönyv</a>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<a class="btn btn-primary" href="img/eredmenyek/Midnight-Sun-See-Romance-show.pdf" role="button">Eredmények</a>
</div>
<div class="labrador">
<a href="img/labradorok/Russel/Osei/1.jpg">
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<button type="button" class="btn btn-primary">Ősei</button>
</div>
</a>
<a href="img/labradorok/Russel/Osei/2.jpg"></a>
<a href="img/labradorok/Russel/Osei/3.jpg"></a>
<a href="img/labradorok/Russel/Osei/4.jpg"></a>
<a href="img/labradorok/Russel/Osei/5.jpg"></a>
<a href="img/labradorok/Russel/Osei/6.jpg"></a>
<a href="img/labradorok/Russel/Osei/7.jpg"></a>
<a href="img/labradorok/Russel/Osei/8.jpg"></a>
<a href="img/labradorok/Russel/Osei/9.jpg"></a>
<a href="img/labradorok/Russel/Osei/10.jpg"></a>
</div>
<div class="labrador">
<a href="img/labradorok/Russel/1.jpg">
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<button type="button" class="btn btn-primary">Képek</button>
</div>
</a>
<a href="img/labradorok/Russel/2.jpg"></a>
<a href="img/labradorok/Russel/3.jpg"></a>
<a href="img/labradorok/Russel/4.jpg"></a>
<a href="img/labradorok/Russel/5.jpg"></a>
</div>
</p>
</div>
</div>
<div class="card w-50" style="margin-right: 10px;">
<img class="card-img-top" src="img/labradorok/Russel/1.jpg" alt="Russel">
<div class="card-body">
<h5 class="card-title">Midnight Sun Sea Romance "Russel"</h5>
<p class="card-text">
<ul class="list-group list-group-flush">
<li class="list-group-item">Színe: Fekete/Black</li>
<li class="list-group-item">Születési idő: 2007.11.24.</li>
<li class="list-group-item">Csípő: HD-A (free)</li>
<li class="list-group-item">Könyök: 0-0 (mentes / free)</li>
<li class="list-group-item">Szem: mentes (free)</li>
<li class="list-group-item">prcd-PRA: mentes (szülők által)</li>
<li class="list-group-item">EIC: mentes (free)</li>
<li class="list-group-item">Képességvizsga: vizsga ideje: 2013.04.20.</li>
</ul>
<div class="btn-group mr-2" role="group" aria-label="First group" style="margin-top:10%;">
<a class="btn btn-primary" href="img/torzskonyvek/Midnight-Sun-See-Romance-pedigree.pdf" role="button">Törzskönyv</a>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<a class="btn btn-primary" href="img/eredmenyek/Midnight-Sun-See-Romance-show.pdf" role="button">Eredmények</a>
</div>
<div class="labrador">
<a href="img/labradorok/Russel/Osei/1.jpg">
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<button type="button" class="btn btn-primary">Ősei</button>
</div>
</a>
<a href="img/labradorok/Russel/Osei/2.jpg"></a>
<a href="img/labradorok/Russel/Osei/3.jpg"></a>
<a href="img/labradorok/Russel/Osei/4.jpg"></a>
<a href="img/labradorok/Russel/Osei/5.jpg"></a>
<a href="img/labradorok/Russel/Osei/6.jpg"></a>
<a href="img/labradorok/Russel/Osei/7.jpg"></a>
<a href="img/labradorok/Russel/Osei/8.jpg"></a>
<a href="img/labradorok/Russel/Osei/9.jpg"></a>
<a href="img/labradorok/Russel/Osei/10.jpg"></a>
</div>
<div class="labrador">
<a href="img/labradorok/Russel/1.jpg">
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<button type="button" class="btn btn-primary">Képek</button>
</div>
</a>
<a href="img/labradorok/Russel/2.jpg"></a>
<a href="img/labradorok/Russel/3.jpg"></a>
<a href="img/labradorok/Russel/4.jpg"></a>
<a href="img/labradorok/Russel/5.jpg"></a>
</div>
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="img/labradorok/Russel/1.jpg" alt="Russel">
<div class="card-body">
<h5 class="card-title">Midnight Sun Sea Romance "Russel"</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Színe: Fekete/Black</li>
<li class="list-group-item">Születési idő: 2007.11.24.</li>
<li class="list-group-item">Csípő: HD-A (free)</li>
<li class="list-group-item">Könyök: 0-0 (mentes / free)</li>
<li class="list-group-item">Szem: mentes (free)</li>
<li class="list-group-item">prcd-PRA: mentes (szülők által)</li>
<li class="list-group-item">EIC: mentes (free)</li>
<li class="list-group-item">Képességvizsga: vizsga ideje: 2013.04.20.</li>
</ul>
<div class="btn-group mr-2" role="group" aria-label="First group" style="margin-top:10%;">
<a class="btn btn-primary" href="img/torzskonyvek/Midnight-Sun-See-Romance-pedigree.pdf" role="button">Törzskönyv</a>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<a class="btn btn-primary" href="img/eredmenyek/Midnight-Sun-See-Romance-show.pdf" role="button">Eredmények</a>
</div>
<div class="labrador">
<a href="img/labradorok/Russel/Osei/1.jpg">
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<button type="button" class="btn btn-primary">Ősei</button>
</div>
</a>
<a href="img/labradorok/Russel/Osei/2.jpg"></a>
<a href="img/labradorok/Russel/Osei/3.jpg"></a>
<a href="img/labradorok/Russel/Osei/4.jpg"></a>
<a href="img/labradorok/Russel/Osei/5.jpg"></a>
<a href="img/labradorok/Russel/Osei/6.jpg"></a>
<a href="img/labradorok/Russel/Osei/7.jpg"></a>
<a href="img/labradorok/Russel/Osei/8.jpg"></a>
<a href="img/labradorok/Russel/Osei/9.jpg"></a>
<a href="img/labradorok/Russel/Osei/10.jpg"></a>
</div>
<div class="labrador">
<a href="img/labradorok/Russel/1.jpg">
<div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
<button type="button" class="btn btn-primary">Képek</button>
</div>
</a>
<a href="img/labradorok/Russel/2.jpg"></a>
<a href="img/labradorok/Russel/3.jpg"></a>
<a href="img/labradorok/Russel/4.jpg"></a>
<a href="img/labradorok/Russel/5.jpg"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的3张卡片的结果： https://i.gyazo.com/f9eaf705003c1f0d9c9902d18b72a10a.png
看起来不错，但是当我再添加一张时，卡太紧了。调整页面大小时遇到相同的问题： https://i.gyazo.com/5da34159b9ac878fa3b416d8ebda4303.png
答案 0 :(得分：0)
您可以使用flexbox，并且当窗口变窄时，请使用wrap来适合卡片。将这些CSS属性添加到card-group div
display: flex;
flex-wrap: wrap;
或将bootstrap flex并包装类到card-group div
<div class="card-group d-flex flex-wrap">
并为所有卡片提供默认的宽度值，例如 width：300px