如何在Bootstrap模态框页脚添加文本与按钮并实现换行显示？

Bootstrap的.modal-footer默认采用Flexbox布局，子元素会默认横向排列，这就是你看到按钮和文本并排的原因。以下几种方法可以让文本显示在按钮下方：

方法1：用空元素强制换行 #

在按钮和文本之间添加一个占满整行的空元素，强制文本换行到下一行：

<div class="modal-footer">
    <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
    <div class="w-100"></div>
    <small>Entire or partial data collected from Wikipedia.</small>
</div>

方法2：将页脚改为纵向布局 #

给.modal-footer添加flex-column类，让子元素纵向排列，同时可以调整对齐方式和间距：

<div class="modal-footer flex-column align-items-start">
    <button type="button" class="btn btn-dark mb-2" data-dismiss="modal">Close</button>
    <small>Entire or partial data collected from Wikipedia.</small>
</div>

方法3：让文本容器占满整行 #

把文本放在容器里，添加w-100类让它占满一行，这样按钮会自动在上一行：

<div class="modal-footer">
    <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
    <p class="w-100 mb-0">Entire or partial data collected from Wikipedia.</p>
</div>

之前直接给文本加<p>或<span>没用，是因为Flex容器里的子元素都会被当作flex item，即使是块级元素也不会自动换行，需要通过上述方式调整布局。

内容的提问来源于stack exchange，提问作者www.friend0.in