Bootstrap div列高度更改其他div的位置

时间：2016-08-30 13:41:36

标签： html css twitter-bootstrap

我在使用<div class="col-md-X"> bootstrap时面临布局问题。通过在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    | |

如图所示

enter image description here

问题可以在JSFiddle中找到。

我希望最终结果是：

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

4 个答案:

答案 0 :(得分：1)

尝试创建以下布局

Layout 

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

答案 1 :(得分：0)

这是因为您超出了行的最大大小。每个div->行必须最多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>

答案 2 :(得分：0)

我有改变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 :(得分：0)

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

var maxHeight = 0;

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

$("div").height(maxHeight);
相关问题
最新问题