<h1> 后跟 <div display: block> => 没有换行？

【问题标题】：<h1> followed by <div display: block> => no break line?<h1> 后跟 <div display: block> => 没有换行？
【发布时间】：2019-07-16 09:35:15
【问题描述】：

我正在从我的 HTML 中删除大部分 <br> 并尝试用 CSS 替换它。我尝试了几种技术，但没有一个对我有用，我做错了什么？

• 使用 Bootstrap 4，我尝试将 d-block 类添加到我的元素（h1 和以下 div），
• 我已尝试使用 CSS 添加边距/底部填充，
• 或者，在 Bootstrap 文档中，将其嵌入到 <span> 并添加相同的类 (d-block p-2)
• 我也试过给<h1>添加CSS，比如：

.h1 {
  width: 100%;
  display: block;
  padding-bottom: 10px;
}

.h1::after {
  content: '\A';
  white-space: pre;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<h1 class="d-block">Portfolio</h1>

<!-- Mosaic buttons -->
<div class="d-block">
  <button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
  <button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
  <button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
  <button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>

在 StackOverflow 上，sn-p 工作正常，但这是我在本地 的结果（无法在此处重现）

我希望按钮位于 <h1> 标记下（而不是在其右侧） 这是我删除所有
之前的网站（缓慢且有问题）：https://staging-det-music.herokuapp.com/

如果有人有兴趣，git repo：https://gitlab.com/kawsay/det

我错过了什么？任何帮助将不胜感激！

【问题讨论】：

• 我不确定我是否理解问题所在..
• 当我运行代码 sn-p 时，按钮位于 <h1> 标题下。
• 我将编辑我的帖子以使其更清晰。问题是包含 的

  位于

  标签旁边（在右侧）。我希望它在底部。 （作为sn-p，这并不能真正说明我的问题）

• 这并不能真正说明我的问题 --> 所以你必须编辑来说明问题，否则对我们来说没有问题
• 我尝试在本地重现我的行为，让我稍等一下（我虽然会说明它，但我错了）