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

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 %}


{% csrf_token %}
    

        

            

                
                Shift Date
            
        
        

            

                
                    Server Name
                    {% for server in serverLst %}
                    {{server}}
                    {% endfor %}
                
                Select your server
            
        
        

            

                Submit
            
        
    



 

    
    

        
数据汇总表
        
 
            

                

                    
User name
                    
Starting
                    
Ending
                    
Bonus
                
            
            

                

                    
1
                    
Mark
                    
Otto
                    
@mdo
                
                

                    
2
                    
Jacob
                    
Thornton
                    
@fat
                
                

                    
3
                    
Larry the Bird
                    
@twitter
                
            
        
    

    
    

        
相关图片展示
        

            @@##@@
            图片描述1
        
        

            @@##@@
            图片描述2
        
    

    
    

        
额外信息录入
        

            {% csrf_token %}
            

                附加字段一
                
            
            

                附加字段二
                
            
            提交附加信息
        
    



{% endblock %}

代码解释：

科威旅游管理系统

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

下载

立即学习“前端免费学习笔记（深入）”；

• 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文件中，而不是使用内联样式。这样可以提高代码的可维护性和复用性。
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开发的推荐实践。