引导网格合并答案

【问题标题】：Bootstrap Grid Merge引导网格合并
【发布时间】：2020-08-30 03:36:25
【问题描述】：

我有两个网格我想无缝合并为一个更大的网格。

有没有办法在不破坏当前 HTML 结构的情况下强制它们表现得好像在一个网格中一样。

当前显示为

孩子[0]

孩子[1] 孩子[2] 孩子[3]

希望显示为

孩子[0] 孩子[1] 孩子[2] 孩子[3]

<div id="TNTemplate" class="row">
    <div id="Child[0]" class="col-md-4">First Instance of Stuff</div>
</div>
<div id="TNPlaceHolder" class="row">
    <div id="Child[1]" class="col-md-4"> First Clone of First Instance of Stuff</div>
    <div id="Child[2]" class="col-md-4"> Second Clone of First Instance of Stuff</div>    
    <!-- A bunch more rows  -->    
    <div id="Child[3]" class="col-md-4"> Tenth Clone of First Instance of Stuff</div>
</div>

谢谢！！

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

我认为你不能不破坏当前的 HTML。

可能的解决方案：

将所有 div 放在一行中。

添加合并它们的新行。

 <div class="row">
    <div class="col-md-4">
       <div id="TNTemplate" class="row">
           <div id="Child[0]" class="col-md-4">First Instance of Stuff</div>
       </div>
     </div>
    <div class="col-md-8">
        <div id="TNPlaceHolder" class="row">
            <div id="Child[1]" class="col-md-4"> First Clone of First Instance of 
            Stuff</div>
            <div id="Child[2]" class="col-md-4"> Second Clone of First Instance of 
            Stuff</div>    
         <!-- A bunch more rows  -->    
            <div id="Child[3]" class="col-md-4"> Tenth Clone of First Instance of 
         Stuff</div>
    </div>
 </div>

【讨论】：