css - 如何自定义具有相同类名的 Bootstrap 列?

标签 css twitter-bootstrap css-selectors

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

Edit: I want to do much more than change background colors so a simple span tag is not optimal.

处理此问题的最佳做法是什么?假设我链接到 Bootstrap 和我自己的自定义 .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>

最佳答案

您可以在没有唯一 ID 的情况下通过 jQuery 执行此操作,但如果您可以使用 ID 可能更容易管理。

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

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

JSFiddle example

关于css - 如何自定义具有相同类名的 Bootstrap 列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32281343/

相关文章:

css - 响应式 CSS iOS 7 不工作

html - 将 div 元素并排放置并居中

html - 图标字体的 i 元素

javascript - 网站背景水波纹效果

javascript - Jquery - 单击时反转动画(切换或 if/else)

html - 截断 URL 以使其适合布局的最佳方法是什么

css - 将模态放在屏幕左侧

javascript - 如何使用 bootstrap 和 fontawesome 将我的弹出窗口设置为单击而不是悬停?

css - 如何使用伪类:target within an image map

html - 如何获得特定元素的第一个 child ?