利用Bootstrap栅格系统实现HTML表格旁侧内容布局

{% extends 'login/basic.html' %}
{% block title %}Approval of count{% endblock title %}
{% block body %}

<!-- 现有顶部表单 (Form 1) -->
<form action="/approval" method="post">{% csrf_token %}
    <div class="row g-2">
        <div class="col-md">
            <div class="form-floating">
                <input type="date" class="form-control" id="floatingInputGrid" name="date">
                <label for="floatingInputGrid">Shift Date</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <select name="serverName" class="form-select" id="floatingSelectGrid">
                    <option selected>Server Name</option>
                    {% for server in serverLst %}
                    <option value="{{server}}">{{server}}</option>
                    {% endfor %}
                </select>
                <label for="floatingSelectGrid">Select your server</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <button type="submit" class="btn btn-primary mx-5 my-2" id="floatingInputGrid">Submit</button>
            </div>
        </div>
    </div>
</form>

<!-- 新增：用于表格、图片和第二个表单的横向布局容器 -->
<div class="row mt-4"> <!-- mt-4 为顶部外边距，增加与上方元素的间距 -->

    <!-- 第一列：表格 -->
    <div class="col-md-4">
        <h4>数据汇总表</h4>
        <table class="table table-bordered"> <!-- 移除内联样式 width:25%，让Bootstrap管理宽度 -->
            <thead>
                <tr>
                    <th scope="col">User name</th>
                    <th scope="col">Starting</th>
                    <th scope="col">Ending</th>
                    <th scope="col">Bonus</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 第二列：图片 -->
    <div class="col-md-4">
        <h4>相关图片展示</h4>
        <div class="mb-3">
            <img src="https://via.placeholder.com/300x200?text=Image+1" class="img-fluid rounded" alt="示例图片1">
            <small class="d-block text-muted mt-1">图片描述1</small>
        </div>
        <div>
            <img src="https://via.placeholder.com/300x200?text=Image+2" class="img-fluid rounded" alt="示例图片2">
            <small class="d-block text-muted mt-1">图片描述2</small>
        </div>
    </div>

    <!-- 第三列：第二个表单 (Form 2) -->
    <div class="col-md-4">
        <h4>额外信息录入</h4>
        <form action="/submit_additional_data" method="post">
            {% csrf_token %}
            <div class="mb-3">
                <label for="additionalField1" class="form-label">附加字段一</label>
                <input type="text" class="form-control" id="additionalField1" name="field1" placeholder="请输入内容">
            </div>
            <div class="mb-3">
                <label for="additionalField2" class="form-label">附加字段二</label>
                <textarea class="form-control" id="additionalField2" name="field2" rows="3" placeholder="请输入详细描述"></textarea>
            </div>
            <button type="submit" class="btn btn-success">提交附加信息</button>
        </form>
    </div>

</div>

{% endblock %}