Bootstrap div列高度更改其他div的位置[重复]答案

【问题标题】：Bootstrap div column height change other div's locations [duplicate]Bootstrap div列高度更改其他div的位置[重复]
【发布时间】：2016-08-30 22:00:51
【问题描述】：

我在使用引导程序的<div class="col-md-X"> 时遇到了布局问题。通过在 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-7    | | col-md-4  |  
|    col-md-7    | | col-md-4  |  
|    col-md-7    | |

但是，当我在其中放置大量内容时，例如，第二个 col-md-4 它会强制最后一个 col-md-7 下降。

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

如图所示

问题可见JSFiddle。

我希望最终结果是：

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

【问题讨论】：

使用 Jquery 有一个很好的方法。如果您愿意接受 jquery 解决方案，请告诉我

标签： html css twitter-bootstrap

【解决方案1】：

尝试创建以下布局

<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>

【讨论】：

【解决方案2】：

我已经改变了 html

喜欢

<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>

https://jsfiddle.net/e8ve0wy2/1/

【讨论】：

【解决方案3】：

这是因为您超出了行的最大大小。每个 div->row 最多只能有 12 个 cols（col-md-7 + col-md-4 + col-md-1 = 12 cols）。

您的代码必须是这样的：

   <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>

【讨论】：

问题在于高度，列高将下一个 div 向下推，在 UI 上看起来很尴尬。

【解决方案4】：

您可以将 div 匹配为与最大的相同大小：

var maxHeight = 0;

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

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

【讨论】：