如何在sm断点修改Shopware 6页脚列尺寸

核心问题分析 #

你当前的页脚在桌面端（lg断点）显示正常，但在移动端断点下，col-md-4类导致列宽不符合预期。要实现4列布局在md及以上断点均匀占满一行，需要调整栅格列类，并修正Bootstrap栅格嵌套结构的错误。

具体修改步骤 #

1. 替换外层列的类名：将最外层的col-md-4改为col-12 col-md-3，确保移动端（xs断点）全屏显示，md及以上断点每列占3份栅格（4列刚好填满12份栅格）。
2. 修正栅格嵌套结构：Bootstrap要求col必须包裹在row内，你当前代码直接在col内嵌套col会导致布局错乱，需要给内部的col-12 col-lg-4添加外层row容器。

修改后的完整代码片段 #

{% block layout_footer_navigation_columns %}
    {{ parent() }}
    <div class="col-12 col-md-3 footer-column js-footer-column">
        <div class="row">
            <div class="col-12 col-lg-4">
                <div class="footer-box-trustpilot">
                </div>      
            </div>    
        </div>
        <div class="row">
            <div class="col-12">
                <div>
                </div> 
            </div>    
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
        </div>
        <div class="footer-vat">
        </div>
        <div class="footer-copyright">
            <div class="fotter-adresse">
            </div>
            <div class="telepone-email">
            </div>
        </div>
    </div>
{% endblock %}

关键说明 #

• col-12：保证最小断点（<576px，移动端）下每列全屏显示，避免横向滚动。
• col-md-3：在md断点（≥768px）及以上，每列占3份栅格，4列刚好填满12份，实现均匀分布的4列布局。
• 新增内层row：修复栅格嵌套规范问题，确保内边距和布局逻辑符合Bootstrap要求。

内容的提问来源于stack exchange，提问作者jdgs56z