正如标题所述，我正在处理一个产品草稿，其中产品被插入到手风琴中进行折叠。问题是我使用PHP循环遍历每个数据库行，在可折叠的手风琴内插入新的产品卡片，但对齐方式不像我想要的一样，大多数情况下是并排排列，直到没有空间绘制另一个产品卡片，然后转到下一行。
<html>
<head><title>Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- Bootstrap CDN Font-awesome -->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<div class="card ProfileContent">
<div class="card-body">
<ul class="nav nav-tabs nav-stacked" style="direction:RTL;">
<li class="nav-item" style="font-family:hana !important;">
<a href="#about" data-toggle="tab" class="nav-link active"><i class="fa fa-info-circle fa-3x"></i></a>
</li>
<li class="nav-item" style="font-family:hana !important;">
<a href="#drafts" data-toggle="tab" class="nav-link"><i class="fa fa-paperclip fa-3x"></i></a>
</li>
<li class="nav-item" style="font-family:hana !important;">
<a href="#connect" data-toggle="tab" class="nav-link"><i class="fa fa-address-book fa-3x"></i></a>
</li>
</ul>
<div class="tab-content" style="font-family:hana !important; text-align: right;">
<div id="about" class="tab-pane fade">
<h3>معلومات عن الشركة</h3>
<p>حساب المسؤول (الدعم الفني)</p>
</div>
<div id="drafts" class="tab-pane in active">
<h3>المنتجات</h3>
<p>درفتات الشركة هنا</p>
<div id="accordianId" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="section1HeaderId">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordianId" href="#section1ContentId" aria-expanded="true" aria-controls="section1ContentId">
Draft number 1
</a>
</h5>
</div>
<div id="section1ContentId" class="collapse in" role="tabpanel" aria-labelledby="section1HeaderId">
<div class="card-body">
<?
foreach($DRTitems as $product)
{?>
<div class="card" style="width:268px; height:auto;">
<img class="card-img-top" style="width:260px; height:220px;" src="..\upload\panadol.png"></img>
<div class="card-title" style="font-family:hana !important; font-size: 34px !important; color:black !important; text-align:center !important;">
<!-- Prodcut name -->إسم الدواء
</div>
<div class="card-text ml-3" style="color:black !important; text-align:left !important;">
التركيبة الكيميائية
</div><br><br>
<form action="#" method="POST">
<div class="row">
<div class="form-group d-flex flex-fill">
<input type="text" class="form-control ml-4" style="width:90px !important;"name="" id="" aria-describedby="helpId" placeholder="الكمية" required>
</div>
<div class="options d-flex flex-fill">
<select class="custom-select" style="width:140px" required>
<option selected>حجم العبوة</option>
<?
$optionCounter = 1;
foreach($productdosageform as $dosageform){
echo'<option value="'.$optionCounter.'">'.$dosageForm['dosageform'].'</option>';
$optionCounter = ++$optionCounter;
}?>
</select>
</div>
</div>
<center>
<div class="form-group d-flex flex-fill">
<label for="price" Style="font-family:Verdana, Geneva, Tahoma, sans-serif !important; font-size:28px !important; color:lightgreen! important; position: relative; left:90px;">30LYD</label>
</div>
</center>
<div class="form-group">
<center>
<input type="submit" value="إضافة للسلة" class="btn btn-success" style="font-family:hana; text-align:center; width:180px;">
</center>
</div>
</form>
</div><?}?>
</div>
</div>
</div>
</div>
</div>
<div id="connect" class="tab-pane fade">
<h3>الاتصال</h3>
<p>معلومات الاتصال مع الشركة</p>
</div>
</div>
</div>
</div>
</body>
</html>连接到数据库中的操作
更新后:- 使用(d-flex justify-content-around)之后，我得到了以下结果
