添加 form 标签后 HTML div 元素缩小

Question

我在 div 元素之外添加了 Form 标签，但由于某种原因它们缩小了。我正在使用 Bootstrap，我猜这是因为我已将主容器 div 设置为“row”，当我将其切换为“col”时，它不再收缩，但这不是我想要的布局。这是我的代码：

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

这是设计：

下面的行是所需的布局，这就是添加表单标记之前的情况，上面的行是我添加表单时发生的情况。是什么原因造成的？我该如何解决这个问题？感谢您的帮助！！

Answer 1

来自文档：

您已在行和列之间插入了一个表单，因此该列现在是该行的孙子项，而不是子项。

用表单替换 div，而不是将表单放在 div 内。确保在表单上设置行类。