Bootstrap 3网格系统-“单元"高度可扩展,但会将整个下一行向下移动 [英] Bootstrap 3 grid system - "cells" are expandable in height, but it shifts the entire next row down
本文介绍了Bootstrap 3网格系统-“单元"高度可扩展,但会将整个下一行向下移动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在此页面上单击文本框,该框在其下方打开注释.然后,它下面的行向下移动.问题在于,该行下面的所有列都向下移位,这会产生大量空白,只有1个向下移位(扩展单元格下面的一个).有没有办法用Bootstrap 3做到这一点?
I have this page where you click on a text block, the box opens comments below it. The row below it shifts down then. Problem is that ALL columns in the row below shift down, which creates a ton of whitespace.Only 1 should shift down (the one below the expanded cell). Is there a way to do this with bootstrap 3?
推荐答案
是的,您需要更改网格的布局.您不会将它们排成3列,而是将它们排成一列.
Yes, you need to change the layout of your grid. you wouldn't lay them out 3 across to a row, you would lay them out going down in columns.
<div class="row">
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
[here's where to put the picture of
the car spanning 2 columns, so to speak]
</div>
</div>
</div>
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
有道理吗?
这篇关于Bootstrap 3网格系统-“单元"高度可扩展,但会将整个下一行向下移动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文