时间戳

首页 > 解决方案 > 为垂直居中的引导程序 4 卡添加空间

html - 为垂直居中的引导程序 4 卡添加空间

问题描述

我试图在中间列的卡片之间留出一个边距，就像在左右列的卡片上所做的那样。向卡片类添加顶部边距和/或底部边距不起作用。也没有添加回报。唯一接近的是一个小时，但正如你所见，这在卡片的两侧都有一条垂直线。有什么建议么？

<div class="container">
<div class="row align-items-center">
    <div class="col-4">
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
    </div>
    <div class="col-4">
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">Taller</h2>
                <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                <a href="#" class="btn btn-default-drk">Link To</a>
         </div>
<hr>
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">Taller</h2>
                <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                <a href="#" class="btn btn-default-drk">Link To</a>
         </div>
<hr>
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">Taller</h2>
                <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                <a href="#" class="btn btn-default-drk">Link To</a>
         </div>
        </div>
    </div>
</div>
</div>

    <div class="col-4">
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
    </div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

您没有关闭一些“更高”的 div。关闭它并将“mb-3”类添加到卡片后，问题就解决了。

<div class="card mb-3">
     <div class="card-body">
            <h2 class="card-title">Taller</h2>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
     </div>
</div>
<div class="card mb-3">
        <div class="card-body">
            <h2 class="card-title">Taller</h2>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
        </div>
</div>

<div class="card mb-3">
        <div class="card-body">
            <h2 class="card-title">Taller</h2>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
        </div>
</div>

推荐阅读