如何制作带有固定宽度卡的卡片组？

Question

我想做出响应张牌使用引导4张固定宽度的卡.在这里,我发布了下面的代码,但它没有响应为什么？

<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 1</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 2</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 3</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 4</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>

Answer 1

对于具有固定宽度卡的Bootstrap 4卡片组,请执行以下操作:

将每张卡放入带有类的列中col-auto mb-3(自动宽度列+边距底部为3个单位).

要将它们居中,请将justify-content-center该类添加到该行.

这是一个有效的代码片段(点击下面的"运行代码段"并展开到整页):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid mt-4">
    <div class="row justify-content-center">
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>
</div>