<h1>后跟<div display：block> =>是否没有换行符？

Question

我正在从HTML中删除大多数<br>，并尝试将其替换为CSS。我已经尝试了几种技巧，但没有一种对我有用，我做错了什么？

• 使用Bootstrap 4，我尝试将类d-block添加到我的元素（ h1 和以下 div ）中，
• 我尝试使用CSS添加边距/填充底部，
• 或按照Bootstrap文档中的说明，将其嵌入<span>中并添加相同的类（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>

在StackOverflow上，该代码段工作正常，但这是我在本地（无法在此处重现）的结果。

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

如果有人感兴趣，请使用git repo：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>