如何在行之间垂直间隔

Question

我想实现类似的目标

[start-row]
  [space]
  [space]
  [space]
[end-row]

所以看起来像这样

我尝试给出align-self-start和align-self-end，但没有给出结果。

Answer 1

如果要在两列之间留空格：

<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">
  <div class="row">
    <div class="col-md-12 bg-dark mb-5">
      <p class="p-3 text-center text-light">Hello</p>
    </div>
    <div class="col-md-12 bg-dark mb-5">
      <p class="p-3 text-center text-light">I'm there</p>
    </div>
  </div>
</div>

Answer 2

您是否正在寻找类似的东西

body, html {
 height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
<div class="d-flex align-content-between border flex-wrap h-100 mb-3">
    <div class="p-2 w-100 border">row 1</div>  
    Some contents
    <div class="p-2 w-100 border">row 2</div>
  </div>