bootstrap css 类层级

Question

我想了解如何使用 bootstrap 元素构建我的 css 文件。当所有元素都具有几乎相同的类时，尝试 select 一个独特的元素是非常棘手的，所以除了使用 id 之外，我如何才能 select 来自像这样的结构的独特元素？

   <div class="row">
      <div class="col-lg-12">
          <div class="row">
            <div class="col-md-2">CREATED</div>
            <div class="col-md-2">MODIFIED</div>
            <div class="col-md-2">USER STATUS</div>
            <div class="col-md-2">STATUS</div>
            <div class="col-md-2">MODEL</div>
          </div>
          <div class="row">
            <div class="col-md-2">26/02/2018</div>
            <div class="col-md-2">26/02/2018</div>
            <div class="col-md-2">quote requested</div>
            <div class="col-md-2">
              <select class="form-control"></select>
              <button class="btn btn-default">SAVE</button>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default">DOWNLOAD FILE</button>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default">SELECT</button>
            </div>
          </div>
      </div>
    </div>

假设我希望“下载文件”按钮具有此属性: width:50% 。我如何 select 那个特定的按钮而不给他一个 ID？

Answer 1

解决方案 1：

使用 css 选择器而不是 ID。
示例：

.row .col-lg-12 .row:nth-child(2) .col-md-2:nth-child(5) button.btn.btn-default {
    width: 50%;
    background-color: red;
    color: #ffffff;
}

更多：W3School.

这是您关于 Codepen.

问题的解决方案(1)

解决方案 2：

为按钮使用自定义 css class。
示例：

.btn-custom {
    width: 50%;
    background-color: red;
    color: #ffffff;
}

这是您关于 Codepen.

问题的解决方案(2)

希望这有帮助。

bootstrap css 类层级

bootstrap css classes hierarchy

html

css

workflow

twitter-bootstrap

解决方案 1：

解决方案 2：

bootstrap css 类 层级

bootstrap css classes hierarchy

html

css

workflow

twitter-bootstrap

解决方案 1：

解决方案 2：

bootstrap css 类层级