Question

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

编辑：我想做的不仅仅是更改背景颜色，所以这很简单 span标签不是最佳的。

处理此问题的最佳做法是什么？假设我链接到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>

Answer 1

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

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

Answer 2

您可以通过jQuery执行此操作而不使用唯一ID，但如果您可以使用ID，则可能更容易管理。

charFound _ "" = False

JSFiddle example

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

2 个答案: