Question

我有这个页面，你点击一个文本块，该框打开它下面的评论。它下面的一行向下移动。问题是下面一行中的所有列都向下移动，这会产生大量的空白。只有1个应该向下移动（扩展单元格下面的那个）。有没有办法用bootstrap 3做到这一点？

Answer 1

是的，您需要更改网格的布局。你不会把它们排成一排，你会把它们排成一列。

<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网格系统 - “单元格”的高度可扩展，但它会将整个下一行向下移动

1 个答案: