如何使用Bootstrap让表单与卡片页脚内的其他元素同行对齐

解决方案 #

问题原因：<form> 元素默认为块级元素，会独占整行，所以默认会显示在前面的行内元素下方。
你只需要使用Bootstrap内置的工具类，给form标签添加d-inline类，将其设置为行内元素，即可和前面的Test1/Test2/Test3链接在同一行显示，不需要额外编写自定义CSS。如果显示后发现表单和前面的链接垂直对齐不一致，可以再给form添加align-middle类调整垂直对齐效果。

完整修改后代码 #

CSS部分

.css123 {
    text-decoration: none;
    color: black;
}

.css123:hover {
    color: #3DB9C3 !important;
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card bg-light">
                    <div class="card-body">
                        <p>
                            test
                        </p>
                        </div>
                        <div class="card-footer ">
                            <div class="float-start ">
                                <div class="text-start">
                                    <p class="card-text">
                                        <small class="text-muted ">
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test1</a>
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test2</a>
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test3</a>
                                            <!-- 仅修改了这一行，添加了d-inline类 -->
                                            <form action="#" id="form-js" class="d-inline">
                                                <a id="count-js"
                                                   class="card-subtitle css123 text-muted me-1">123
                                                    Like(s)</a>
                                                <input type="hidden" id="post-id-js">
                                                <button type="submit"
                                                        class="card-subtitle css123 text-muted me-1">
                                                    Like
                                                </button>
                                            </form>
                                        </small>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

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