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

Question

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

使用 Bootstrap 4，我尝试将 class d-block 添加到我的元素中（h1 和以下 div),
我试过用 CSS、
或者，如 Bootstrap 文档中所述，将其嵌入 <span> 并添加相同的 classes (d-block p-2)
我也尝试过将CSS添加到<h1>，例如：

.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>

在 Whosebug 上，代码片段运行良好，但这是我在本地得到的结果（无法在此处重现）

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

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

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

Answer 1

如果要在列中显示按钮

<div class="d-flex flex-column">
  <h1>Portfolio</h1>
  <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>

如果你想显示彼此相邻的按钮

<div class="d-flex flex-column">
  <h1>Portfolio</h1>
  <div class="d-flex flex-row">
    <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>

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

<h1> followed by <div display: block> => no break line?

html

css

line-breaks

twitter-bootstrap