文章/答案/技术大牛

发布

社区首页 >问答首页 >如何自定义具有相同类名的引导列？

问如何自定义具有相同类名的引导列？
EN

Stack Overflow用户

提问于 2015-08-28 23:58:35

回答 2查看 4.2K关注 0票数 0

我试图在同一行中使用相同的.col-5 (用于调整大小)，但我不知道更改每个列的背景色的最佳方法，因为这些列的名称相同(这将改变所有列的样式)。

编辑:我想做更多的改变背景颜色，所以一个简单的跨度标签不是最佳的。

处理这个问题的最佳做法是什么？假设我链接到引导程序和我自己的自定义.css文件：

<body>


    <header>
      <div class="logo"><h1>Name</h1></div>
    </header>



    <div id="sideBar">

    </div>



    <div id="rowContainer1">

      <div class="row">
        <div class="col-5">
          Hello
        </div>
        <div class="col-5">
          Hello
        </div>
      </div>

    </div>



    <div id="rowContainer2">

      <div class="row">
        <div class="col-5">
          Hello
        </div>
        <div class="col-5">
          Hello
        </div>
      </div>

    </div>



  </body>
</html>

css

twitter-bootstrap

css-selectors

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-08-29 00:36:04

您可以通过jQuery完成这一任务，而不需要唯一的id，但是如果您可以使用id，则可能更容易管理。

.col-red { background-color: red; }
.col-green { background-color: green; }

$("#rowContainer1 div[class=col-5]").eq(1).addClass("col-red");

JSFiddle实例

票数 0

Stack Overflow用户

发布于 2015-08-29 00:03:20

可以为每一列添加不同的类。

.col-red { background-color: red; }
.col-green { background-color: green; }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
  <div class="col-5 col-red">
    RED
  </div>
  <div class="col-5 col-green">
    GREEN
  </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32281343

复制

相似问题

问如何自定义具有相同类名的引导列？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自定义具有相同类名的引导列？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自定义具有相同类名的引导列？
EN