Elemen div HTML mengecut selepas menambah teg borang

Question

Saya menambah teg Borang di luar elemen div tetapi atas sebab tertentu ia mengecut. Saya menggunakan Bootstrap dan saya rasa ia adalah kerana saya telah menetapkan div bekas utama kepada "baris" dan apabila saya menukarnya kepada "col" ia tidak lagi mengecut, tetapi itu bukan susun atur yang saya mahu. Ini kod saya:

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

Ini reka bentuknya:

Barisan di bawah adalah susun atur yang diingini, inilah yang berlaku sebelum saya menambah markup borang, baris di atas adalah apa yang berlaku apabila saya menambah borang. Apa yang menyebabkan ini? Bagaimanakah saya boleh menyelesaikan masalah ini? terima kasih atas bantuan anda! !

Answer 1

Dari Dokumen:

Anda telah menyisipkan borang antara baris dan lajur, jadi lajur itu kini adalah cucu kepada baris, bukan anak.

Ganti div dengan borang dan bukannya meletakkan borang di dalam div. Pastikan anda menetapkan kelas baris pada borang.