Html 引导div列高度更改其他div'；s位置

我在使用bootstrap的

时遇到了一个布局问题。通过在div中放置大量内容，它会迫使其他div转移到另一个位置

这是我的html布局：

<div class="row">
  <div class="col-md-7 content"></div>
  <div class="col-md-4 col-md-offset-1"></div>
  <div class="col-md-7 content"></div>
  <div class="col-md-4 col-md-offset-1"></div>
  <div class="col-md-7 content"></div>
</div>

但是，当我将大量内容放入其中时，例如，第二个

col-md-4

会强制最后一个

col-md-7

下降

|    col-md-7    | | col-md-4  |  
|    col-md-7    | | col-md-4  |  
|                | |  content
|                | |  content
|                | |  content
|    col-md-7    | |  

如图所示

这个问题可以从中看出

我希望最终结果是：

|    col-md-7    | | col-md-4  |  
|    col-md-7    | | col-md-4  |  
|    col-md-7    | |  content
|                | |  content
|                | |  content

---

这是因为您超出了行的最大大小。每个div->行的最大列数必须为12列（col-md-7+col-md-4+col-md-1=12列）

您的代码必须如下所示：

   <div class="row">
      <div class="col-md-7 content"></div>
      <div class="col-md-5 content"></div>
   </div>
   <div class="row">
      <div class="col-md-7 content"></div>
      <div class="col-md-4 content"></div>
      <div class="col-md-1 content"></div>
   </div>

我已经更改了html

像

投入1：
投入2：
投入3：
投入4：
投入5：
投入6：
投入7：
投入8：
投入9：
投入10：
投入12：
投入13：
投入14：
投入15：
投入16：
投入17：
投入18：
投入19：
投入20：
投入21：
投入22：
投入23：
输入24：
投入25：
投入26：

---

尝试创建以下布局

---

您可以将div与最大的div进行匹配：

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

---

问题在于高度，列高度向下推下一个div，在UI上看起来很尴尬。如果您对jquery解决方案开放，请告诉我

<div class="col-md-7">
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 1:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 2:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 3:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 4:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 5:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 6:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 7:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 8:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 9:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 10:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 12:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>

            </div>
        </div>

        <div class="col-md-4 col-md-offset-1">
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 13:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 14:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 15:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 16:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>

            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 17:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 18:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 19:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 20:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 21:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 22:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 23:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 24:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 25:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 26:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>
        </div>

<row>
 <col-md-7>
   <row>
     <col-md-12></col-md-12>
   </row>
   <row>
     <col-md-12></col-md-12>
   </row>
 </col-md-7>
 <col-md-4>
   <row>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
   </row>
  </col-md-4>
</row>

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);