bootstrap主页对齐问题

Question

在我的主页中，我有不同的框，看起来像这样：

我希望我的主页看起来像这样：

我不知道该怎么做，通过Bootstrap doc阅读并没有帮助...... 5个盒子放在一个容器中，第一个盒子是col-xs-12，所有其他的盒子都是col-xs-6。每个用户都有很高的变化。

如果他愿意，用户可以隐藏这些框。

Answer 1

我建议你制作两个容纳盒子的柱子容器：

<div class="row">    // this is your left column
    <div class="col-xs-6">
        <div class="box"></div>
        <div class="box"></div>
    </div> 
    <div class="col-xs-6">  // right column
        <div class="box"></div>
        <div class="box"></div>
    </div> 
</div>

或根据您的评论请求，我建议isotope您可以找到一个简单的示例here

Answer 2

您可以将第一个框保留为所有12列。将其他4列拆分为2个不同的列，左侧为方框2和4，右侧为方框3和5。 Here is a demo

<div class="container">
    <div class="col-xs-12 box one"></div>
    <div class="col-xs-12 two-cols">
        <div class="col-xs-6 col-one">
            <div class="col-xs-12 box two"></div>
            <div class="col-xs-12 box four"></div>
        </div>
        <div class="col-xs-6 col-two">
            <div class="col-xs-12 box three"></div>
            <div class="col-xs-12 box five"></div>
        </div>
    </div>
</div>

修改

你可以通过javascript实现你想要的。隐藏框时，您可以检查左列中的所有框是否都隐藏 - 如果是 - 隐藏整个列。这会将右列移动到其位置。 New demo here

检查左列的框是否隐藏的功能：

function hideCol1() {
    var hide = true;
    $('.col-one .box').each(function() {
        if(!$(this).is(':hidden')) {
            hide = false;
        }
    });
    return hide;
}

然后在隐藏框的事件中使用它：

if(hideCol1()) {
    $('.col-one').hide();
}