我在 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>
這是設計:
下面的行是所需的佈局,這就是添加表單標記之前的情況,上面的行是我新增表單時發生的情況。是什麼原因造成的?我該如何解決這個問題?感謝您的幫忙! !
來自文件:
您已在行和列之間插入了表單,因此該列現在是該行的孫子項,而不是子項。
用表單取代 div,而不是將表單放在 div 內。確保在表單上設定行類別。