Bootstrap导航栏下拉菜单中实现登录/注册按钮平分一行

要实现两个按钮平分下拉菜单的一行宽度，你需要调整布局结构，利用Bootstrap的网格系统分配宽度，同时修复原代码中的HTML结构问题（<ul class="dropdown-menu">的直接子元素必须是<li>，不能是<div>）。

修改后的完整代码如下：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Login
    </a>
    <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end bg-dark" aria-labelledby="navbarDropdown">
        <!-- 修复结构：将表单放在li内，符合ul的语义要求 -->
        <li class="px-3 py-2">
            <form method="POST" enctype="multipart/form-data" action="{% url 'login' %}">
                {% csrf_token %}
                <div class="mb-2">
                    <input type="text" name="username" placeholder="Username"
                        class="form-control bg-dark border-0 text-light">
                </div>
                <div class="mb-2">
                    <input type="password" name="password" placeholder="Password"
                        class="form-control bg-dark border-0 text-light">
                </div>
                <hr class="dropdown-divider border-top border-secondary my-2">
                <!-- 使用Bootstrap网格实现按钮平分 -->
                <div class="row g-0">
                    <div class="col-6">
                        <button class="btn btn-dark border-0 w-100">Login</button>
                    </div>
                    <div class="col-6">
                        <a href="{% url 'signup' %}" class="btn btn-dark border-0 w-100">Register</a>
                    </div>
                </div>
            </form>
        </li>
    </ul>
</li>

关键修改点说明：

• 修复HTML结构：把原代码中的<div class="form-group">替换成<li class="px-3 py-2">，给表单添加内边距保证下拉菜单内排版美观，同时符合<ul>只能包含<li>的语义规范。
• 网格布局实现平分：用.row和.col-6将两个按钮分别放在占比50%的列中，.g-0去掉列之间的间距，按钮添加.w-100确保填满所在列的宽度，实现完美平分一行的效果。
• 优化表单排版：给输入框添加.mb-2类增加垂直间距，替换原有的<li>包裹输入框的方式，避免不必要的列表样式干扰。

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