html - 如何在 Css 中为 div 的每个第一个元素添加右边框(bootstrap)

Question

我有一个页面，在桌面上每行三张图片，在移动设备上每行两张。我想为桌面添加前两个图像的右边框，在移动 View 中为第一个图像添加右边框。

但我做不到。

我正在从数据库中获取数据/图像，每页可能有 20 - 30 个。这是我的 HTML 代码:

<div class="col-xs-12 col-sm-12 col-md-12 " >
<?php
$sql = "SELECT * FROM `mytable` ORDER BY `id`  ";
$result = mysql_query($sql) or die('couln not select query');
while($row= mysql_fetch_array($result)){

 ?>
 <form id="mainMenuItem" action ="#" method="post">
<div class="col-xs-6 col-sm-6 col-md-4" style="border:1px solid gray; ">
<a href="#">
<div id="imgProDetail" class="img-responsive">
<div class="proImg">
**<img src="<?=$row['imgurl']?>**" class="img-responsive cat-img">  
 </div>
 <div class="proName">
 <h1 style="text-align:center" class="cat-name">**<?=$row['catName']?**> </h1>
 </div>      
 </div>
</a>
</div>

</form>
<?php }; ?> 
</div>

我希望它像这样显示: enter image description here

请问如何做到这一点。

谁能帮忙吗

Answer 1

尝试 .element:first-child 和 .element:nth-child(2) 移动设备使用媒体查询