Bootstrap 5 Card-body 中 Form 居中方法 | 详细教程

在 Bootstrap 5 中，card-body 类不会自动居中其内部的 form 元素。card-body 类只是为 card 提供一个内部容器，并没有任何居中的特性。\n\n要使 form 元素居中，可以使用其他的 Bootstrap 类或自定义 CSS 来实现。以下是几种实现方式：\n\n1. 使用 d-flex 和 justify-content-center 类，将 form 元素置于 card-body 内部的 div 中，并添加这两个类：\nhtml\n<div class="card-body">\n <div class="d-flex justify-content-center">\n <form>\n <!-- form content -->\n </form>\n </div>\n</div>\n\n\n2. 使用自定义 CSS，将 form 元素的 margin 属性设置为 auto，可以使其水平居中：\nhtml\n<div class="card-body">\n <form style="margin: 0 auto;">\n <!-- form content -->\n </form>\n</div>\n\n\n3. 使用 text-center 类，将 form 元素包裹在一个 div 中，并添加 text-center 类：\nhtml\n<div class="card-body">\n <div class="text-center">\n <form>\n <!-- form content -->\n </form>\n </div>\n</div>\n\n\n请注意，以上的方法都需要根据具体的情况进行调整，以适应你的布局和样式需求。