html - Bootstrap 3 嵌套行宽

Question

假设我们有这段代码:

<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-8 col-md-9" style="background-color: red;">
      <div style="background-color: purple;">
        Div inside the main row
      </div>
      <div class="row">
        <div style="background-color: blue;">
          Div in a nested row        
        </div>
      </div>
    </div>
  </div>
</div>

如何使用 Bootstrap 使嵌套行与第一个 div 具有相同的宽度？

谢谢你的时间

Answer 1

请看演示。白色间隙是容器填充，边框是容器区域，彩色框是内容。

• 红色边框只是一个示例包装器(非引导类)。
• 蓝色边框是.container box
• 黄色边框为.row框
• 黑色边框为.col-*框

.wrapper {
  width: 200px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 15px;
  color: #fff;
}

.container {
  border: 3px solid blue;
}

.row {
  border: 2px solid orange;
}

[class*="col"] {
border: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <div style="background-color: green;">
      Div inside container
    </div>
    <div class="row">
      <div class="col-sm-8 col-md-9">
        <div style="background-color: purple;">
          Div inside the main row and column
        </div>
        <div class="row">
          <div style="background-color: blue;">
            Div in a nested row
          </div>
        </div>
      </div>
    </div>
    <div style="background-color: green;">
      Div inside container
    </div>
  </div>
</div>