I'm trying to spread 3 rows of 4 bootstrap cards evenly across a jumbotron with space-around. This is the result:
I can't figure out why it's not spreading evenly. I'm not sure if there's a margin interfering thats included with bootstrap or something else. Here's my code:
<div class="jumbotron d-flex flex-column justify-content-around">
<div class="row">
<div class="card border-warning mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/bitcoin.png" alt="Bitcoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">bc1qnjpcl0xtywcuxuc7fr9s5gsnhkugnpf0udcn00</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin Cash</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/cash.png" alt="Bitcoin Cash QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">qrrj4pcweu0v6vn37q4f6euqah6es5p93uqlcxr8kl</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 20rem;">
<div class="card-header">Litecoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/litecoin.png" alt="Litecoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">LSTzUWZbAVRCgDMHjc9fjPM5PFRndKxnkK</p>
</div>
</div>
<div class="card border-ethereum mb-3" style="max-width: 20rem;">
<div class="card-header">Ethereum</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/ethereum.png" alt="Ethereum QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">0xe67F900395958c609Ad3098A0a85d8fCf19B6067</p>
</div>
</div>
</div>
<div class="row">
<div class="card border-info mb-3" style="max-width: 20rem;">
<div class="card-header">XRP</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/xrp.png" alt="XRP QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">rUS4KaEGr7Xdac5XAjeqEvSXpgewxHQjK1</p>
</div>
</div>
<div class="card border-monero mb-3" style="max-width: 20rem;">
<div class="card-header">Monero</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/monero.png" alt="Monero QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text monero">4AvkGD1MNUhB8dLgAYEUUK1UJxJuj6zXC9DDPb2ywYpRCZ1Y6yWGaxFfD3q8HAgbPXXqnqaGxiZGqjFtjULbgGDhAiLBX6M</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 20rem;">
<div class="card-header">Dash</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/dash.png" alt="Dash QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">Xukc7xfRecEMMNuhDKb5Vb1MkoNe28Pson</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 20rem;">
<div class="card-header">ZCash</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/zcash.png" alt="ZCash QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">t1PN1dwc8brKkKhzWqZahwuarngs5STa9fy</p>
</div>
</div>
</div>
<div class="row">
<div class="card border-doge mb-3" style="max-width: 20rem;">
<div class="card-header">DogeCoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/dogecoin.png" alt="DogeCoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">DR6gfyGh2txp9eMpvuweQwUqPzqWc7VJBN</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin Gold</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/gold.png" alt="Bitcoin Gold QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">GTuJYM373DDa8qWYx4ryTwaDDpPkY5CxD9</p>
</div>
</div>
</div>
</div>
这是我的CSS，但这只是为了增加边框颜色：
.border-ethereum{
border-color: #5c7de9 !important;
}
.border-monero{
border-color: #ff7a00 !important;
}
.border-doge{
border-color: #ceb73d !important;
}
.monero{
font-size: 10px;
}
有人可以帮忙吗？
Remove
<div class="row">. Changeflex-columntoflex-rowin<div class="jumbotron d-flex flex-row justify-content-around">