使用 margin: auto 后我怎样才能做一个底部 space
How can I make a bottom space after using margin: auto
我正在学习Bootstrap v5.0。我正在尝试使用 Bootstrap 创建网页。我现在需要帮助。我正在尝试在小屏幕上的两列之间创建底部 space。对于大屏幕，我的设计是我需要的。
我的代码 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>
这是图片：
大屏还可以
但是在小屏幕上我想要 space 这里
我该怎么做？
所以你要用的是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>
你只要加一个bootstrapclass
<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>
此外，您可以在样式属性中使用calc函数，例如margin-bottom:calc(20vh - 10%)
我正在学习Bootstrap v5.0。我正在尝试使用 Bootstrap 创建网页。我现在需要帮助。我正在尝试在小屏幕上的两列之间创建底部 space。对于大屏幕，我的设计是我需要的。
我的代码 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>
这是图片：
大屏还可以
但是在小屏幕上我想要 space 这里
我该怎么做？
所以你要用的是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>
你只要加一个bootstrapclass
<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>
此外，您可以在样式属性中使用calc函数，例如margin-bottom:calc(20vh - 10%)