布局挑战与传统方法局限
在web开发中，我们经常需要将多个元素（如表格、图片、表单等）并排显示，而非默认的垂直堆叠。html元素通常分为块级元素（如div, p, table）和行内元素（如span, img）。块级元素会独占一行，导致后续内容自动换行到下方。
为了实现横向布局，一些开发者可能会尝试使用CSS的float属性或position: absolute/position: fixed。然而，float布局管理复杂，容易出现浮动清除问题；position: absolute则会将元素从文档流中移除，不利于响应式布局和内容管理，且需要手动计算位置，维护成本较高。对于现代Web布局，更推荐使用CSS Flexbox或CSS Grid，特别是当项目已经引入了如Bootstrap这样的前端框架时，直接利用其提供的栅格系统是最高效和健壮的选择。
利用Bootstrap栅格系统实现横向布局
鉴于您在现有HTML代码中已经使用了div class="row"和div class="col-md"等Bootstrap类，最推荐且最符合项目风格的解决方案是利用Bootstrap的栅格系统。Bootstrap栅格系统基于Flexbox构建，提供了一种强大的、响应式的布局机制，允许您将页面内容划分为12个逻辑列，并根据需要将元素放置在这些列中。
核心概念：row 和 col
- row 类: 充当Flex容器，用于包裹一组列。它会抵消父容器的内边距，并为其中的列提供正确的间距。
- col 类: 充当Flex项目，代表栅格系统中的一个列。您可以指定不同屏幕尺寸下的列宽，例如col-md-4表示在中等（md）及以上屏幕尺寸下占据4列的宽度。
布局实现步骤
要将表格、图片和第二个表单并排显示，我们需要将它们包裹在一个div元素中，并为这个div添加row类。然后，将表格、图片容器和第二个表单分别放置在不同的div中，并为这些div添加col类，以指定它们在栅格系统中的宽度。
1. 规划列宽 Bootstrap栅格系统总共有12列。如果您想将表格、图片和第二个表单平均分配在三列中，那么每个元素可以占据12 / 3 = 4列。因此，可以使用col-md-4。
2. 组织HTML结构 在您现有表单（Form 1）之后，创建一个新的div作为栅格行，并在其中定义三个列。
{% 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">
@@##@@
<small class="d-block text-muted mt-1">图片描述1</small>
</div>
<div>
@@##@@
<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 %}代码解释：
立即学习“前端免费学习笔记（深入）”；
- div class="row mt-4"：这是一个新的Bootstrap行容器，mt-4为其添加了顶部外边距，使其与上方的表单分离。
- div class="col-md-4"：这三个div分别代表了表格、图片容器和第二个表单所在的列。col-md-4表示在“中等”（medium）及更大屏幕上，每个元素将占据12列中的4列。在小屏幕上，它们会自动堆叠，实现响应式布局。
- 表格: 移除了style="width:25%"的内联样式。Bootstrap的table类已经提供了基础样式，而列宽由col-md-4控制，确保其在栅格系统中的正确行为。
- 图片: 使用img-fluid类确保图片在响应式布局中能够自适应其父容器的宽度。rounded类可以给图片添加圆角。
- 第二个表单: 结构与第一个表单类似，使用了Bootstrap的表单控件样式，并放置在独立的列中。
注意事项与最佳实践
- 引入Bootstrap: 确保您的Django模板中正确引入了Bootstrap的CSS和JavaScript文件。通常在basic.html中完成。
- 响应式设计: col-md-4会在中等及以上屏幕上生效。对于更小的屏幕（如手机），这些列会自动堆叠，这是Bootstrap的默认响应式行为。如果您需要更精细的控制，可以使用col-sm-X、col-lg-X等类。例如，col-12 col-md-4表示在所有屏幕上默认占据12列（即独占一行），但在中等及以上屏幕上占据4列。
- 避免内联样式: 尽量将样式定义在CSS文件中，而不是使用内联样式。这样可以提高代码的可维护性和复用性。
- 语义化HTML: 尽管本教程侧重布局，但在实际开发中，仍应尽可能使用语义化的HTML标签（如header, main, section, aside, footer等），以提高可访问性和SEO。
- Django CSRF Token: 在所有表单中都包含{% csrf_token %}，这是Django安全机制的一部分，用于防止跨站请求伪造攻击。
- 图片路径: 确保图片src属性中的路径是正确的，指向您项目中的图片资源。
总结
通过利用Bootstrap的栅格系统，您可以优雅且高效地解决HTML元素横向布局的问题。将表格、图片和表单等内容包裹在row容器中，并为每个内容分配适当的col类，不仅能实现所需的并排显示效果，还能自动获得响应式布局的优势，确保页面在不同设备上都能良好展现。这种方法比传统的float或position布局更易于管理和维护，是现代Web开发的推荐实践。
