如何通过CSS将模态框底部的Close按钮置于新行？

你的问题是因为Bootstrap的.modal-footer默认采用flex布局（display: flex; flex-direction: row;），所以子元素会横向排列。以下几种方法可以让Close按钮换行显示在分页组件下方：

方法1：修改模态框底部的flex方向 #

直接调整.modal-footer的flex布局为垂直排列，所有子元素会自动上下堆叠：

.modal-footer {
  flex-direction: column;
  align-items: flex-start; /* 可选：让元素左对齐，默认是居中 */
  gap: 1rem; /* 可选：增加元素间的间距 */
}

方法2：让Close按钮占满整行 #

如果不想改变整个底部的布局方向，只需让按钮占满一行，强制换行：

用Bootstrap内置类 #

给按钮添加w-100类（宽度100%），同时可选加mt-2（margin-top）增加间距：

<button type="button" onClick="$('#error-text').hide()" class="btn btn-secondary w-100 mt-2" data-dismiss="modal">Close</button>

自定义CSS #

如果不想用内置类，写自定义样式：

.modal-footer .btn-secondary {
  width: 100%;
  margin-top: 0.5rem;
}

方法3：给按钮单独套容器并设置宽度 #

给Close按钮外面套一个div，让这个容器占满整行：

<div class="modal-footer">
  <div class="pagination">
    <!-- 分页内容 -->
  </div>
  <div style="width: 100%; margin-top: 0.5rem;">
    <button type="button" onClick="$('#error-text').hide()" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

为什么你之前的尝试没生效？ #

因为flex容器内的子元素是flex item，display: block无法改变flex布局的横向排列规则，必须通过调整flex容器的方向、让元素占满整行等方式来实现换行。

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