Das HTML-Div-Element wird nach dem Hinzufügen eines Formular-Tags verkleinert
Ich habe die Form-Tags außerhalb der div-Elemente hinzugefügt, aber aus irgendeinem Grund werden sie kleiner. Ich verwende Bootstrap und vermute, das liegt daran, dass ich das Hauptcontainer-Div auf „row“ gesetzt habe und wenn ich es auf „col“ umstelle, wird es nicht mehr verkleinert, aber das ist nicht das Layout, das ich möchte. Das ist mein 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>
Das ist das Design:
Die Zeile darunter ist das gewünschte Layout. Das passiert, bevor ich das Formular-Markup hinzufüge. Die Zeile darüber ist das, was passiert, wenn ich das Formular hinzufüge. Was verursacht das? Wie kann ich dieses Problem lösen? Vielen Dank für Ihre Hilfe! !
