数据库项目作为引导 4 卡

Posted 2023-02-24

技术标签:

【中文标题】数据库项目作为引导 4 卡【英文标题】：database items as bootstrap 4 cards 【发布时间】：2020-08-19 16:46:19 【问题描述】：

正如标题所说，我正在编写产品草案，将产品插入手风琴折叠。问题是我使用 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>

正在连接到 db

更新 :- 使用 (d-flex justify-content-around) 这就是我得到的

【问题讨论】：

将“d-flex justify-content-around”类与 card-body 类一起使用。这将解决您的问题。 【参考方案1】：

尝试使用