Bootstrap表格侧边布局技巧分享

哈喽！今天心血来潮给大家带来了《Bootstrap表格旁侧布局技巧》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

布局挑战与传统方法局限

在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">
                &lt;input type=&quot;date&quot; class=&quot;form-control&quot; id=&quot;floatingInputGrid&quot; name=&quot;date&quot;&gt;
                <label for="floatingInputGrid">Shift Date</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                &lt;select name=&quot;serverName&quot; class=&quot;form-select&quot; id=&quot;floatingSelectGrid&quot;&gt;
                    <option selected>Server Name</option>
                    {% for server in serverLst %}
                    <option value="{{server}}">{{server}}</option>
                    {% endfor %}
                &lt;/select&gt;
                <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>
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;additionalField1&quot; name=&quot;field1&quot; placeholder=&quot;请输入内容&quot;&gt;
            </div>
            <div class="mb-3">
                <label for="additionalField2" class="form-label">附加字段二</label>
                &lt;textarea class=&quot;form-control&quot; id=&quot;additionalField2&quot; name=&quot;field2&quot; rows=&quot;3&quot; placeholder=&quot;请输入详细描述&quot;&gt;&lt;/textarea&gt;
            </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的表单控件样式，并放置在独立的列中。

注意事项与最佳实践

1. 引入Bootstrap: 确保您的Django模板中正确引入了Bootstrap的CSS和JavaScript文件。通常在basic.html中完成。
2. 响应式设计: col-md-4会在中等及以上屏幕上生效。对于更小的屏幕（如手机），这些列会自动堆叠，这是Bootstrap的默认响应式行为。如果您需要更精细的控制，可以使用col-sm-X、col-lg-X等类。例如，col-12 col-md-4表示在所有屏幕上默认占据12列（即独占一行），但在中等及以上屏幕上占据4列。
3. 避免内联样式: 尽量将样式定义在CSS文件中，而不是使用style=""内联样式。这样可以提高代码的可维护性和复用性。
4. 语义化HTML: 尽管本教程侧重布局，但在实际开发中，仍应尽可能使用语义化的HTML标签（如header, main, section, aside, footer等），以提高可访问性和SEO。
5. Django CSRF Token: 在所有表单中都包含{% csrf_token %}，这是Django安全机制的一部分，用于防止跨站请求伪造攻击。
6. 图片路径: 确保图片src属性中的路径是正确的，指向您项目中的图片资源。

总结

通过利用Bootstrap的栅格系统，您可以优雅且高效地解决HTML元素横向布局的问题。将表格、图片和表单等内容包裹在row容器中，并为每个内容分配适当的col类，不仅能实现所需的并排显示效果，还能自动获得响应式布局的优势，确保页面在不同设备上都能良好展现。这种方法比传统的float或position布局更易于管理和维护，是现代Web开发的推荐实践。

今天关于《Bootstrap表格侧边布局技巧分享》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！