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

Question

我正在设计一个基于 Opencart 的购物车。以下是 Category.tpl 文件中的主要代码部分，产品更新自

  <div class="row">
    <?php foreach ($products as $product) { ?>
    <div class="product-layout product-list col-xs-12">
      <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>

下面是它正在生成的css

<div class="row">
              <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">
                 <div class="product-thumb">

             <div class="image"><a href="http://rangawoods.tryfcomet.com/index.php?route=product/product&amp;path=78&amp;product_id=194"><img src="http://rrrwoods.com/image/cache/catalog/Door/SMD-001-500x500.jpg" alt="SMD-001" title="SMD-001" class="img-responsive"></a> </div>


        <div>

现在我只需要在创建的第一列中设置样式 row.How 我可以这样做吗？我附上了一张图片以供快速参考。

Answer 1

您应该先尝试 child class 创建边框，Ex

.row .col-lg-3:first-child{
    border:1px solid red;
}

Answer 2

尝试

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

例子

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    one
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    two
  </div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Three
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Four
  </div>
</div>

更新： 用你渲染的 html 我认为这是不可能的，你把所有的列都放在一行中。在 Bootstrap 中它会工作，但是你不能定位用户在页面中看到的所有第一个元素，因为它因屏幕分辨率而异。

如果您只需要设置第一个列的样式，可以使用此代码

.row .product-layout:first-child {
    border: 3px solid red;
}

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

How to Style First Column Only In a Dynamic Bootstrap Row

css

opencart

twitter-bootstrap