L'élément HTML div rétrécit après l'ajout d'une balise de formulaire

Question

J'ai ajouté les balises Form en dehors des éléments div mais pour une raison quelconque, elles rétrécissent. J'utilise Bootstrap et je suppose que c'est parce que j'ai défini le div du conteneur principal sur "row" et lorsque je le passe sur "col", il ne rétrécit plus, mais ce n'est pas la mise en page que je souhaite. Voici mon code :

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

Voici le design :

La ligne ci-dessous est la mise en page souhaitée, c'est ce qui se passe avant d'ajouter le balisage du formulaire, la ligne ci-dessus est ce qui se passe lorsque j'ajoute le formulaire. Quelle est la cause de cela ? Comment puis-je résoudre ce problème? Merci pour votre aide! !

Answer 1

De Documents :

Vous avez inséré un formulaire entre la ligne et la colonne, la colonne est donc désormais un petit-enfant de la ligne, et non un enfant.

Remplacez le div par un formulaire au lieu de mettre le formulaire dans un div. Assurez-vous de définir la classe de lignes sur le formulaire.