Bootstrap 网格中的行不对齐答案

【问题标题】：rows in Bootstrap grid don't line upBootstrap 网格中的行不对齐
【发布时间】：2017-04-01 00:46:48
【问题描述】：

只是尝试制作第二行 col-md-6s（我复制了“行” div 并将其粘贴到容器 div 中），但我似乎无法弄清楚为什么它没有完美排列。

最后两行 HTML 代码反映了第二行的开头。

.btn-group-vertical{
  border: 2px solid black;
  border-radius: 10px;
}
.col-md-6 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#prod_view {
  height: 100%;
  background-color: lightcoral;
  display: flex;
  justify-content: flex-start;
  border: solid;
  border-radius: 10px;
}
.col-md-6 > div:last-child {
  width: 50%;
}
.boxclass {
  height: 95%;
  width: 50%;
}

<div class="container">
  <div class="row">

    <div class="col-md-6" style="background-color: lightcyan">
      <div class="btn-group-vertical btn-group-lg">
        <button type="button" class="btn btn-primary">Quick Select</button>
        <button type="button" class="btn btn-primary">Show in Depth</button>
        <button type="button" class="btn btn-primary">Delete Product</button>
      </div>
    <div>

    <div id="prod_view">
      <div class="boxclass" >
        <img alt="product" class="img-rounded" src="../Images/math.jpg" style="max-height: 100%; max-width: 100%;">
      </div>
      <div class="boxclass">some cool blocks all stacked up n shtufff</div>
    </div>

  </div>
</div>

<div class="col-md-6" style="background-color: lightgray">
  <div class="btn-group-vertical btn-group-lg">
    <button type="button" class="btn btn-primary">Quick Select</button>
    <button type="button" class="btn btn-primary">Show in Depth</button>
    <button type="button" class="btn btn-primary">Delete Product</button>
  </div>
<div>

<div id="prod_view">
  <div class="boxclass"></div>
  <div class="boxclass"></div>
</div>
</div>
</div>

<div class="row">

<div class="col-md-6" style="background-color: lightcyan">

【问题讨论】：

你能提供你的标记吗？
在此处发布您的代码
@JoeLissner 添加了
看起来您的第二行嵌套在第一行内，但并非所有标记都在那里，所以我无法确认。

标签： html twitter-bootstrap css

【解决方案1】：

.row 正确关闭时工作正常...

http://www.codeply.com/go/OCsEsFb2Lr

<div class="container">
    <div class="row">
        <div class="col-md-6" style="background-color: lightcyan">

        </div>
        <div class="col-md-6" style="background-color: lightgray">

        </div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: lightcyan">

        </div>
        <div class="col-md-6" style="background-color: lightgray">

        </div>
    </div>
</div>

【讨论】：