作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Bootstrap thumbnail
。我想每行对齐 3 个缩略图。请看图片。 这就是我想要发生的事情: (Please Click) 正如您在图像上看到的那样, thumbnail
每行对齐 3 个。但我现在拥有的是:(Please Click) 在图像上,它们每行对齐 1。请注意,我显示了来自数据库的卡车图片和标签。我只想将它们每行对齐 3 个 thumbnails
。非常感谢您的帮助。这是我的代码:
<!-- IMAGE THUMBNAIL START -->
<div class="row">
<div class="col-sm-2"></div>
<div class="row">
<div class="col-sm-6 col-md-3">
<?php
include 'configmysqli.php';
$query = "SELECT * FROM trucks ORDER BY TRUCK_TYPE ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
?>
<div class="thumbnail">
<img src="<?=$row['TRUCK_PHOTO']?>" height="242" width="200" class="img-
responsive img-rounded" alt="">
<div class="caption">
<form action="requesttruck.php" method="post" enctype="multipart/form-
data">
<h3><?=$row['TRUCK_TYPE']?></h3>
<input type="text" name="companynum" hidden="true" value="<?
=$row['COMPANY_NUM']?>">
<input type="text" name="trucktype" hidden="true" value="<?
=$row['TRUCK_TYPE']?>">
<button class="btn btn-primary" name="request">Request</button>
<button class="btn btn-default" name="view">View</button>
</form>
</div> <!-- caption -->
</div> <!-- thumbnail -->
<?php
}
?>
</div> <!-- col -->
</div> <!-- row -->
<div class="col-sm-2"></div>
</div>
最佳答案
您的 while
需要包含您正在生成的列,否则您只是在一个列中生成所有内容。
请注意,您可能最终需要两个循环。一个用于生成行,一个用于生成列(每个缩略图)。
<div class="row">
<?php
include 'configmysqli.php';
$query = "SELECT * FROM trucks ORDER BY TRUCK_TYPE ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="<?=$row['TRUCK_PHOTO']?>" height="242" width="200" class="img-
responsive img-rounded" alt="">
<div class="caption">
<form action="requesttruck.php" method="post" enctype="multipart/form-
data">
<h3><?=$row['TRUCK_TYPE']?></h3>
<input type="text" name="companynum" hidden="true" value="<?
=$row['COMPANY_NUM']?>">
<input type="text" name="trucktype" hidden="true" value="<?
=$row['TRUCK_TYPE']?>">
<button class="btn btn-primary" name="request">Request</button>
<button class="btn btn-default" name="view">View</button>
</form>
</div> <!-- caption -->
</div> <!-- thumbnail -->
</div> <!-- col -->
<?php
}
?>
</div> <!-- row -->
关于php - 如何对齐 Bootstrap 缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45147041/
我有一个具有可变数量子元素的固定大小的 div。我不知道 children 的大小。目标是缩小它们以适合父级。 例子: .parent { width: 100px; height: 100p
我是一名优秀的程序员,十分优秀!