如何将Bootstrap模态框中的Send message按钮调整至左侧？

解决方案 #

你之前的配置不生效的原因是：Bootstrap 4及以上版本的.modal-footer默认采用Flexbox布局，默认对齐属性为justify-content: flex-end（靠右对齐），而text-left这类文本对齐类仅对行内/行内块级元素生效，对Flex容器的子元素对齐控制无效。

你可以任选以下两种方法实现按钮左移：

• 使用Bootstrap自带的Flex工具类（推荐，无需自定义CSS）
  直接给.modal-footer添加justify-content-start类即可，修改后的代码片段如下：

<div class="modal-footer justify-content-start">
  <button type="button" class="btn btn-primary">Send message</button>
</div>

• 自定义CSS样式
  如果你的Bootstrap版本不支持Flex工具类，可添加如下自定义样式：

.modal-footer {
  justify-content: flex-start;
}

如果样式被覆盖优先级不够，可以给选择器加更高权重，比如给modal-footer加自定义类：

<!-- HTML部分 -->
<div class="modal-footer modal-footer-left">
  <button type="button" class="btn btn-primary">Send message</button>
</div>

<!-- CSS部分 -->
.modal-footer.modal-footer-left {
  justify-content: flex-start;
}

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