html - Bootstrap 3嵌套行宽

假设我们有以下代码：

<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的宽度相同？

感谢您的时间

最佳答案

请看一下演示。白色的空白是容器填充，边框是容器区域，彩色框是内容。


红色边框只是一个示例包装器（非引导程序类）。
蓝色边框是.container框
黄色边框是.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>

关于html - Bootstrap 3嵌套行宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46476882/