我在 div 元素之外添加了 Form 標(biāo)籤,但由於某種原因它們縮小了。我正在使用 Bootstrap,我猜這是因?yàn)槲乙褜⒅魅萜?div 設(shè)為“row”,當(dāng)我將其切換為“col”時(shí),它不再收縮,但這不是我想要的佈局。這是我的程式碼:
<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>
這是設(shè)計(jì):
下面的行是所需的佈局,這就是添加表單標(biāo)記之前的情況,上面的行是我新增表單時(shí)發(fā)生的情況。是什麼原因造成的?我該如何解決這個(gè)問(wèn)題?感謝您的幫忙! !
來(lái)自文件:
您已在行和列之間插入了表單,因此該列現(xiàn)在是該行的孫子項(xiàng),而不是子項(xiàng)。
用表單取代 div,而不是將表單放在 div 內(nèi)。確保在表單上設(shè)定行類別。