引导网格合并

问题描述

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

有没有一种方法可以迫使它们像在一个网格中那样工作而不会破坏当前的HTML结构。

当前显示

孩子[0]

Child [1] Child [2] Child [3]

想要显示

Child [0] Child [1] Child [2] Child [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>

谢谢!

解决方法

我认为您不能不破坏当前的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>