如何在Bootstrap中将searchform与booksform首按钮置于同一行？

要解决跨表单的元素同行布局问题，核心是让Bootstrap的row/col结构包裹需要同行的元素，同时保证form标签的正确嵌套（不跨表单闭合容器）。具体调整如下：

• 用一个顶层row容器，分别容纳两个col：
  1. 第一个col包含完整的searchform表单
  2. 第二个col包含booksform的保存按钮（同时保持booksform标签包裹该按钮及后续的表格、隐藏字段）
• 移除原表单内的多余row结构，避免嵌套混乱

修改后的完整代码：

{% include 'header.html' %}
{% load static %}
<section class="bg-light px-5 py-4">
    
    <div class="row mb-4">
        <div class="col-6"><h2 class="h2">Könyvek</h2></div>
    </div>

    <!-- 外层row包裹需要同行的两个表单元素 -->
    <div class="row align-items-center">
        <!-- 第一个col放搜索表单 -->
        <div class="col-5">
            <form id="searchform" onSubmit="return false;">
                <div class="d-flex gap-2">
                    <input type="text" class="form-control flex-grow-1" id="searchbar">
                    <input type="button" value="Keresés" class="btn btn-outline-secondary" id="search">
                </div>
            </form>
        </div>
        <!-- 第二个col放保存按钮（仍属于booksform） -->
        <div class="col-7 text-end">
            <form action="{% url 'books' %}" method="post" id="booksform" name="booksform">
                {% csrf_token %}
                <input type="button" class="btn btn-primary me-3" value="Mentés" id="save" name="save">
        
                <table class="table table-light table-hover mt-4">
                    <thead>
                        <th>Angol cím</th>
                        <th>Magyar cím</th>
                        <th class="text-center">Olvastam</th>
                    </thead>
                    <tbody id="tbody">
                        {% for i in books %}
                        <tr>
                            <td>{{i.eng_title}}</td>
                            <td>{{i.title}}</td>
                            <td class="text-center"><input type="checkbox" name="check-{{i.id}}" id="check-{{i.id}}" class="form-check-input"></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <input type="hidden" name="checked" id="checked">
            </form>
        </div>
    </div>
</section>
<script src="{% static 'js/books.js' %}" defer data-tocheck="{{books_read}}" data-books="{{booksjson}}"></script>
{% include "footer.html" %}

关键调整说明：

• 用row align-items-center确保两个col内的元素垂直居中对齐
• 搜索表单内改用d-flex gap-2替代原row/col，让搜索框和按钮在同一行且间距合理
• 将booksform的整个内容（包括保存按钮、表格）放入第二个col，保证form标签完整包裹自身所有元素，不与外层row/col产生嵌套冲突

内容的提问来源于stack exchange，提问作者Gergő Kalmár