如何仅在动态引导行中设置第一列的样式 [英] How to Style First Column Only In a Dynamic Bootstrap Row

查看：54
本文介绍了如何仅在动态引导行中设置第一列的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 
<?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['拇指']; ?>"alt="<?php echo $product['name']; ?>"title="<?php echo $product['name']; ?>"class="img-responsive"/></a>
<div>

下面是它生成的css

<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>

现在我只需要在创建的行中设置第一列的样式.我该怎么做?我附上了一张图片以供快速参考.

解决方案

尝试

.row div[class^="col"]:first-child {边框:3px纯黑色；}

示例

.row div[class^="col"]:first-child {边框:3px纯黑色；}

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">一
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">二

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

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">四

更新: 使用您呈现的 html 我认为这是不可能的，您将所有 col 放在一行中.在 Bootstrap 中，它可以工作，但您不能定位用户在页面中看到的所有第一个元素，因为它因屏幕分辨率而异.

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

.row .product-layout:first-child {边框:3px纯红色；}

I am Designing a Shopping Cart based on Opencart. Following is the main part of code in Category.tpl file that products are updating from

  <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>

And Below is the css it is generating

<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>

Now I need to Style the First Column only in created row.How can I do this? I have attached an Image for quick ref.

解决方案

Try

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

Example

.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>

Update: with your rendered html I think its not possible, you have all the col inside a row. In Bootstrap prespective it will work, but you cannot target all the 1st element what the user sees in the page, because it differ with screen resolution.

If you need to just style the first col, you can use this code

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

这篇关于如何仅在动态引导行中设置第一列的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆