【问题标题】：how to add vertical spacing after a breakpoint in bootstrap如何在引导程序中的断点后添加垂直间距
【发布时间】：2022-01-27 19:38:43
【问题描述】：
当我超过断点时，我需要添加一些垂直间距，但我不知道如何将其添加到行中，我尝试将 my-md-5 插入 col 类但它没有改变
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<section id="fauna" class="p-5 bg-secondary text-light">
<div class="text-center pb-2">
<h3 class="text-dark">La fauna del garda</h1>
</div>
<div class="container-lg my-2">
<div class="row gx-5">
<div class="col-md text-center">
<div class="card bg-dark h-100">
<div class="card-body">
<h3 class="card-title text-warning">Pesci</h3>
<p class="card-text">
<h5>Il lago possiede una grande varietà di pesci, fra i più comuni abbiamo l'alosa, il luccio e il lavarello</h5>
</p>
</div>
</div>
</div>
<div class="col-md text-center">
<div class="card bg-dark">
<div class="card-body">
<h3 class="card-title text-warning">Volatili</h3>
<p class="card-text">
<h5>Tuttavia il Garda all'interno del suo ecosistema include anche volatili, quali i gabbiani, folaghe, germani reali e nei dintorni delle spiagge, oltre a tordi, fringuelli, merli, pettirossi, cinciallegre e capinere</h5>
</p>
</div>
</div>
</div>
<div class="col-md text-center">
<div class="card bg-dark h-100">
<div class="card-body">
<h3 class="card-title text-warning">Mammiferi</h3>
<p class="card-text">
<h5>Invece nei dintorni del lago si trovano una moltitudine di animali selvatici molto vari tra i quali stambecchi e numerosi camosci e nelle zone boschive lepri, scoiattoli, donnole, volpi e marmotte</h5>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
【问题讨论】：
标签：
html
twitter-bootstrap
bootstrap-4
【解决方案1】：
在这种情况下使用gap 像这样的gap-3 属性：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<section id="fauna" class="p-5 bg-secondary text-light">
<div class="text-center pb-2">
<h3 class="text-dark">La fauna del garda</h1>
</div>
<div class="container-lg my-2">
<div class="row gx-5 gap-3">
<div class="col-md text-center">
<div class="card bg-dark h-100">
<div class="card-body">
<h3 class="card-title text-warning">Pesci</h3>
<p class="card-text">
<h5>Il lago possiede una grande varietà di pesci, fra i più comuni abbiamo l'alosa, il luccio e il lavarello</h5>
</p>
</div>
</div>
</div>
<div class="col-md text-center">
<div class="card bg-dark">
<div class="card-body">
<h3 class="card-title text-warning">Volatili</h3>
<p class="card-text">
<h5>Tuttavia il Garda all'interno del suo ecosistema include anche volatili, quali i gabbiani, folaghe, germani reali e nei dintorni delle spiagge, oltre a tordi, fringuelli, merli, pettirossi, cinciallegre e capinere</h5>
</p>
</div>
</div>
</div>
<div class="col-md text-center">
<div class="card bg-dark h-100">
<div class="card-body">
<h3 class="card-title text-warning">Mammiferi</h3>
<p class="card-text">
<h5>Invece nei dintorni del lago si trovano una moltitudine di animali selvatici molto vari tra i quali stambecchi e numerosi camosci e nelle zone boschive lepri, scoiattoli, donnole, volpi e marmotte</h5>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
【解决方案2】：
你可以试试这个，它会像你想要的那样工作：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="fauna" class="p-5 bg-secondary text-light">
<div class="text-center pb-2">
<h3 class="text-dark">La fauna del garda</h1>
</div>
<div class="container-lg my-2">
<div class="container-lg my-2">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col text-center">
<div class="card bg-dark h-100">
<div class="card-body">
<h3 class="card-title text-warning">Pesci</h3>
<p class="card-text h5">Il lago possiede una grande varietà di pesci, fra i più comuni abbiamo l'alosa, il luccio e il lavarello</p>
</div>
<div class="card-footer">
</div>
</div>
</div>
<div class="col text-center">
<div class="card bg-dark h-100">
<div class="card-body">
<h3 class="card-title text-warning">Volatili</h3>
<p class="card-text h5">Tuttavia il Garda all'interno del suo ecosistema include anche volatili, quali i gabbiani, folaghe, germani reali e nei dintorni delle spiagge, oltre a tordi, fringuelli, merli, pettirossi, cinciallegre e capinere</p>
</div>
<div class="card-footer">
</div>
</div>
</div>
<div class="col text-center">
<div class="card bg-dark h-100">
<div class="card-body">
<h3 class="card-title text-warning">Mammiferi</h3>
<p class="card-text h5">Invece nei dintorni del lago si trovano una moltitudine di animali selvatici molto vari tra i quali stambecchi e numerosi camosci e nelle zone boschive lepri, scoiattoli, donnole, volpi e marmotte</p>
</div>
<div class="card-footer">
</div>
</div>
</div>
</div>
</div>
</div </div>
</section>
您也可以在Codepen观看
希望对你有所帮助