只是尝试制作第二行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">
&#13;
答案 0 :(得分:3)
正确关闭.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>