使用Bootstrap时如何将一个div放置在另一个div下方？

你在包裹h1标题和form表单的列容器上添加了d-flex类，Bootstrap中d-flex默认的弹性布局方向为横向排列，因此容器下的两个直接子元素（h1所在div、form所在div）会自动并排展示，出现类似分栏的效果。
另外你的列类存在重复定义：同一个div上同时写了col-sm和col-sm-8，会触发Bootstrap栅格样式冲突，建议删掉冗余的col-sm类。

二选一即可：

• 方案1：保留flex布局，在加了d-flex的容器上追加flex-column类，将弹性布局的排列方向改为纵向，子元素就会按上下顺序排布。
• 方案2：如果不需要flex做特殊布局，直接删掉容器上的d-flex justify-content-center类，块级元素默认就是纵向排列，给容器加text-center类同样可以实现内容居中的效果。

<div class="container">
      <div class="row">

        <div class="col-sm">
        </div>
        <!-- 移除重复的col-sm类，追加flex-column修改排列方向 -->
        <div class="col-sm-8 d-flex flex-column justify-content-center mt-5">
          <div><h1>Text &#128075;</h1></div>

          <div>
            <form>
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>

        </div>

        <div class="col-sm">
        </div>

      </div>
    </div>

内容的提问来源于stack exchange，提问作者Arthur