使用边距后如何制作底部空间：自动答案

【问题标题】：How can I make a bottom space after using margin: auto使用边距后如何制作底部空间：自动
【发布时间】：2021-05-07 05:24:27
【问题描述】：

我正在学习 Bootstrap v5.0。我正在尝试使用 Bootstrap 创建一个网页。我现在需要帮助。我试图在小屏幕上的两列之间留出一个底部空间。对于大屏幕，我的设计是我需要的。

我在代码的Education 部分需要帮助。

* {
    /* margin: 0;
    padding: 0;
    box-sizing: border-box; */
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
}
/* ==================== Header ==================== */
header {
    background: #9b59b6;
}
.header-title-box {
    background: #8e44ad;
}
/* ==================== About Container ==================== */
.about-container {
    background: #2ecc71;
}
/* ==================== Education Container ==================== */
.education-container {
    background: #34e7e4;
}

/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="images/png" href="./images/favicon.jpg">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <title>Project Finishing</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
    <!-- =================================== Header =================================== -->
    <header id="home">
        <div class="container-fluid">
            <div class="row vh-100">
                <div class="col-md-9 m-auto py-4 text-white text-center header-title-box">
                    <p class="display-1">Dabananda Mitra</p>
                    <h6>Studying Computer Science and Engineering at ISTT</h6>
                    <h6>Dream: Software Engineer at Google, USA</h6>
                </div>
            </div>
        </div>
    </header>
    <!-- =================================== Navbar Section =================================== -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-expanded="false" aria-controls="navMenu" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navMenu">
                <ul class="navbar-nav m-auto text-uppercase">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#package" class="nav-link">Packages</a>
                    </li>
                    <li class="nav-item">
                        <a href="#reviews" class="nav-link">Reviews</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="#education" class="nav-link">Education</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- =================================== About =================================== -->
    <div class="about-container py-5" id="about">
        <div class="container">
            <div class="row align-items-center d-flex justify-content-center">
                <div class="col-md-8">
                    <p class="display-5">Dabananda Mitra</p>
                    <p class="text-muted">Student | Software Engineer | YouTuber</p>
                    <p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
                    <p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
                    <p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
                </div>
                <div class="col-md-4">
                    <img class="img-fluid rounded-circle border border-light" src="./images/Dabananda_Mitra-removebg-preview.png" alt="Dabananda Mitra">
                </div>
            </div>
        </div>
    </div>
    <!-- =================================== Education =================================== -->
    <div class="education-container py-5" id="education">
        <div class="container">
            <p class="display-4 text-center">Education</p>
            <hr class="mb-5" style="height: 2px; width: 50%; text-align: center; margin: auto;">
            <div class="row my-5">
                <div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">BSc</p>
                </div>
                <div class="col-md-8 card m-auto" style="background: #3c40c6;">
                    <div class="card-body">
                        <h5 class="card-title">Institute of Science Trade & Technology</h5>
                        <hr>
                        <h6 class="card-subtitle mb-5">2020 - 2024</h6>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
                    </div>
                </div>
            </div>
            <div class="row my-5">
                <div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">HSC</p>
                </div>
                <div class="col-md-8 card m-auto" style="background: #3c40c6;">
                    <div class="card-body">
                        <h5 class="card-title">Agricultural University College</h5>
                        <hr>
                        <h6 class="card-subtitle mb-5">2016 - 2018</h6>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
                    </div>
                </div>
            </div>
            <div class="row my-5">
                <div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">SSC</p>
                </div>
                <div class="col-md-8 card m-auto" style="background: #3c40c6;">
                    <div class="card-body">
                        <h5 class="card-title">Balijuri F.M. High School</h5>
                        <hr>
                        <h6 class="card-subtitle mb-5">2011 - 2016</h6>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>

这是图片：

在大屏幕上没问题

但在小屏幕上我想要一个空间

我该怎么做？

【问题讨论】：

mb-1 到 5。然后是 mb-m-0

标签： javascript html css twitter-bootstrap bootstrap-5

【解决方案1】：

另外，你可以使用样式属性里面的calc函数，比如margin-bottom:calc(20vh - 10%)

【讨论】：

【解决方案2】：

所以你要使用的是mx-auto my-5

                <div class="col-md-4 d-flex align-items-center justify-content-center  my-5 mx-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">BSc</p>
                </div>

【讨论】：

【解决方案3】：

你只需添加一个引导类

<div class="col-md-8 card m-auto my-5" style="background: #3c40c6">
        <div class="card-body">
          <h5 class="card-title">Agricultural University College</h5>
          <hr />
          <h6 class="card-subtitle mb-5">2016 - 2018</h6>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Exercitationem non recusandae architecto dolores atque est,
            quisquam minus tempora, libero soluta distinctio, natus nostrum
            veniam reprehenderit neque unde totam! Suscipit dolor harum
            vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab
            repudiandae autem debitis soluta molestias nostrum neque
            corrupti!
          </p>
        </div>
      </div>

【讨论】：