css - Bootstrap 3网格系统的嵌套问题

Question

我在 .aspx 页面中有以下代码

.cDiv {
  background-color: gray;
}

.tColor {
  background-color:yellow;
}

.tColor2 {
  background-color:blue;
}

<div class="container">
<div class="row">
    <div class="col-sm-9 tColor">
        Level 1: .col-sm-9
          <div class="row">
              <div class="col-sm-6 tColor2">
                  Level 2: .col-sm-6
              </div>
              <div class="col-sm-6 cDiv">
                  Level 2: .col-sm-6
              </div>
          </div>
      </div>
  </div>
</div>

问题是第二列比它的父列更宽。我得到以下结果

Answer 1

我想你忘了包括引导 css

.cDiv {
  background-color: gray;
}

.tColor {
  background-color:yellow;
}

.tColor2 {
  background-color:blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
    <div class="col-sm-9 tColor">
        Level 1: .col-sm-9
          <div class="row">
              <div class="col-sm-6 tColor2">
                  Level 2: .col-sm-6
              </div>
              <div class="col-sm-6 cDiv">
                  Level 2: .col-sm-6
              </div>
          </div>
      </div>
  </div>
</div>

工作演示