Bootstrap证明内容周围不散布项目

I'm trying to spread 3 rows of 4 bootstrap cards evenly across a jumbotron with space-around. This is the result: 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">. Change flex-column to flex-row in <div class="jumbotron d-flex flex-row justify-content-around">

/* Here's my css, but it's just for extra border colors: */

.border-ethereum {
  border-color: #5c7de9 !important;
}

.border-monero {
  border-color: #ff7a00 !important;
}

.border-doge {
  border-color: #ceb73d !important;
}

.monero {
  font-size: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron d-flex flex-row justify-content-around">
  
    <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>
点赞
评论