Bootstrap中添加form标签后row内div收缩的问题排查与解决

在使用Bootstrap框架时，把<form>标签放在带row类的<div>外部后，内部带col-sm-3、col-md-3类的div出现收缩现象。将row改成col后收缩问题消失，但不符合预期布局。以下是相关代码，附布局对比（下方为添加form前的预期布局，上方为添加form后的异常布局）：

<div class="row">
    {{ form()}}
    <div class="col-sm-3 col-md-3 ">
        <!-- small box -->
        <div class="small-box bg-success d-flex flex-column">
            <div class="inner">
                <h3>{{ number_format(status1, 0, '', ',') }}</h3>
                <p>აქტიური</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            
            <div class="align-self-center ">
                {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }}
                {{form.render('id',['value':1])}}
                <i class="fa fa-arrow-circle-right"></i>
            </div>
        </div>
    </div>
    {{ form.render('csrf', ['value': security.getToken()]) }}
    {{ end_form() }}
    <!-- ./col -->
{{ form()}}
<div class="col-sm-3 col-md-3">
        <!-- small box -->
        <div class="small-box bg-info d-flex flex-column">
            <div class="inner">
                <h3>{{ number_format(status0, 0, '', ',') }}</h3>
                <p>პასიური</p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <div class="align-self-center">
                {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }}
                {{form.render('id',['value':0])}}
                <i class="fa fa-arrow-circle-right"></i>
            </div>
           
        </div>
</div>
{{ form.render('csrf', ['value': security.getToken()]) }}
{{ end_form() }}
<div>

Bootstrap的row类是基于Flexbox的栅格容器，它的直接子元素必须是带col-*类的元素，才能正确触发栅格系统的宽度分配和间距规则。

• 当<form>直接作为row的子元素时，它没有col-*类的宽度控制属性，打破了栅格的层级结构。row的默认Flex样式会让这个非col-*的子元素自适应内容宽度，导致内部的col-sm-3失去了栅格上下文，只能被内容撑开而收缩。
• 把row改成col时，col本身是弹性容器的适配项，能容纳内部元素，但这偏离了栅格布局的设计逻辑。

根据你每个卡片对应独立表单的需求，推荐两种正确实现方式：

方式一：将表单嵌套在col内部（推荐） #

保持row作为栅格容器，把每个<form>放到对应的col-sm-3里面，完全符合Bootstrap栅格结构：

<div class="row">
    <div class="col-sm-3 col-md-3 ">
        {{ form()}}
        <!-- small box -->
        <div class="small-box bg-success d-flex flex-column">
            <div class="inner">
                <h3>{{ number_format(status1, 0, '', ',') }}</h3>
                <p>აქტიური</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            
            <div class="align-self-center ">
                {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }}
                {{form.render('id',['value':1])}}
                <i class="fa fa-arrow-circle-right"></i>
            </div>
        </div>
        {{ form.render('csrf', ['value': security.getToken()]) }}
        {{ end_form() }}
    </div>
    <!-- ./col -->
    <div class="col-sm-3 col-md-3">
        {{ form()}}
        <!-- small box -->
        <div class="small-box bg-info d-flex flex-column">
            <div class="inner">
                <h3>{{ number_format(status0, 0, '', ',') }}</h3>
                <p>პასიური</p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <div class="align-self-center">
                {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }}
                {{form.render('id',['value':0])}}
                <i class="fa fa-arrow-circle-right"></i>
            </div>
           
        </div>
        {{ form.render('csrf', ['value': security.getToken()]) }}
        {{ end_form() }}
    </div>
</div>

方式二：给form添加col类（快速修复） #

如果必须把form放在col外面，给每个<form>添加col-sm-3 col-md-3类，让它成为row的合法栅格子元素：

<div class="row">
    {{ form(attrs={'class': 'col-sm-3 col-md-3'})}}
    <div class="small-box bg-success d-flex flex-column">
        <!-- 内容不变 -->
    </div>
    {{ form.render('csrf', ['value': security.getToken()]) }}
    {{ end_form() }}
    <!-- ./col -->
    {{ form(attrs={'class': 'col-sm-3 col-md-3'})}}
    <div class="small-box bg-info d-flex flex-column">
        <!-- 内容不变 -->
    </div>
    {{ form.render('csrf', ['value': security.getToken()]) }}
    {{ end_form() }}
</div>

注：这种方式会让form本身成为栅格列，可能带来额外样式问题，仅作为临时修复方案。

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