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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-07

浏览次数：次

返回列表

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

本教程详细介绍了如何利用Bootstrap栅格系统在HTML页面中实现复杂的横向布局，特别是将HTML表格、图片和另一个表单并排显示。通过将这些元素分别放置在不同的栅格列中，可以轻松创建响应式且结构清晰的页面布局，避免元素默认垂直堆叠的问题，并提升用户体验。

布局挑战与传统方法局限

在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类，以指定它们在栅格系统中的宽度。

科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

0 查看详情科威旅游管理系统

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和J*aScript文件。通常在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开发的推荐实践。