如何在Bootstrap 4中居中页脚内的订阅表单？

嘿，我来帮你解决这个问题！要让页脚里的邮箱输入框和订阅按钮居中，不用写额外的CSS，利用Bootstrap 4自带的类就能轻松实现。下面是修改后的完整代码：

<footer class="container-fluid text-center">
  <p>&copy; 2018, Matir Dokan, CSEDU</p>
  <form class="form-inline justify-content-center">
    <input type="email" class="form-control" size="50" placeholder="Email Address">
    <button type="button" class="btn btn-danger ml-2">Subscribe</button>
  </form>
</footer>

关键修改点： #

• 给表单添加justify-content-center类：Bootstrap 4的form-inline本身就是Flex容器，这个类能让容器内的元素在水平方向上居中对齐，完美适配你的需求。
• 替换了过时的pull-right类：Bootstrap 4已经弃用了pull-right，我换成了ml-2给按钮加一点左边距，让输入框和按钮之间的间距更舒服，不会挤在一起。

这样改完之后，表单元素就会和上面的版权文字一样，乖乖居中啦。如果页面有其他自定义样式干扰，这个方法也依然靠谱，因为Bootstrap的内置类优先级足够高，能覆盖大部分冲突样式。

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