如何仅为动态Bootstrap行中的第一列设置样式

嘿，我来帮你搞定这个需求！要给Bootstrap行里的第一个商品列单独设置样式，有两种实用的方案，你可以根据自己的情况选择：

方案一：纯CSS选择器（无需修改PHP模板） #

直接利用CSS的伪类选择器，精准定位行内的第一个商品列，不用动模板代码，非常方便：

/* 选中.row下的第一个.product-layout元素 */
.row > .product-layout:first-child {
    /* 这里替换成你需要的样式，比如示例中的边框和背景 */
    border: 2px solid #e74c3c;
    background-color: #fdf5f5;
    padding: 15px;
}

小贴士：>符号确保只选中.row的直接子元素，避免嵌套结构干扰。如果你的页面结构比较简单，也可以省略>直接用.row .product-layout:first-child。

方案二：在PHP循环中添加自定义类（更灵活可控） #

如果你需要更明确的标记，或者后续要给第一个商品加特殊逻辑，可以在模板的循环里给第一个商品添加专属类：

修改你提供的Category.tpl中的循环代码：

<div class="row">
    <?php $is_first = true; // 标记是否为第一个商品 ?>
    <?php foreach ($products as $product) { ?>
        <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12 <?php if ($is_first) { echo 'first-product-item'; $is_first = false; } ?>">
            <div class="product-thumb">
                <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive"></a>
                </div>
                <!-- 其他商品内容保持不变 -->
            </div>
        </div>
    <?php } ?>
</div>

然后在CSS中针对这个自定义类写样式：

.first-product-item {
    /* 自定义样式示例 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
}

这两种方法都能实现你的需求，第一种适合快速修改，第二种扩展性更强～

内容的提问来源于stack exchange，提问作者Mithu