如何使用网格（引导和jQuery）将更多内容加载到项目中？

我想创建html&css布局，其中包含行中的项目，单击每个项目将加载更多内容。类似于此屏幕上的内容：

网格桌面视图：

如果不是mobile view，对我来说会很容易，它似乎必须具有不同的html元素顺序：

移动视图：

现在，我创建了以下html代码（使用引导css）：

它会向每个项目加载更多内容，但会在布局中打断列和行。 您知道如何在桌面和移动视图上保持网格布局吗？

---

如果有人有好主意，我愿意在不使用引导类的情况下设计它。

这里有一个解决方案可以帮助您：

请查看代码：

$（文档）。在（'单击'，'项a'，函数（）上{
$（“.emp_info”）.width（$（'.row'）.width（）-30）；
$（'.item'）.attr（'style'，''）；
$（this）.closest（'.item'）.css（'margin-bottom'，$（this）.next（）.height（））；
$（'.emp_info'）。不是（$（this.next（））.slideUp（）；
$（this）.next（）.slideToggle（函数（）{
如果（$（this）.is（':hidden'））{
$（'.item'）.attr（'style'，''）；
}
});
});
$（窗口）.on（'resize'，function（））{
$（“.emp_info”）.width（$（'.row'）.width（）-30）；
});
。项目a{
高度：50px；
背景：#000；
边缘底部：5px；
显示：块；
}
.项目：第n个孩子（2）.环境管理信息{
背景色：#ff0；
}
.项目：第n个孩子（3）.环境管理信息{
背景色：#eee；
}
.emp_信息{
背景色：#f00；
边缘底部：10px；
高度：50px；
显示：无；
位置：绝对位置；
左：15px；
}
.行{
位置：相对位置；
}
.col-lg-1，
.col-lg-10，
.col-lg-11，
.col-lg-12，
.col-lg-2，
.col-lg-3，
.col-lg-4，
.col-lg-5，
.col-lg-6，
.col-lg-7，
.col-lg-8，
.col-lg-9，
.col-md-1，
.col-md-10，
.col-md-11，
.col-md-12，
.col-md-2，
.col-md-3，
.col-md-4，
.col-md-5，
.col-md-6，
.col-md-7，
.col-md-8，
.col-md-9，
.col-sm-1，
.col-sm-10，
col-sm-11，
col-sm-12，
.col-sm-2，
.col-sm-3，
col-sm-4，
.col-sm-5，
.col-sm-6，
col-sm-7，
col-sm-8，
col-sm-9，
.col-xs-1，
.col-xs-10，
.col-xs-11，
.col-xs-12，
.col-xs-2，
.col-xs-3，
.col-xs-4，
.col-xs-5，
.col-xs-6，
.col-xs-7，
.col-xs-8，
.col-xs-9{
位置：静态；
}

太棒了！谢谢！它几乎按照我的预期工作。一个问题：我需要第二列和第三列更多的元素，从左边一行开始：这在你们的解决方案中是可能的吗？第二个问题是，若窗口被调整大小，加载的容器的宽度并没有改变…嗨，Tomasz。我已经在帖子中修复了调整大小的问题。你可以查一下，但是关于你的第一期，第二期和第三期到底是什么意思？
<div class="container">
    <div class="row">

        <div class="col-md-4 item">
            <a class="link" href="#emp_more_4" data-id="4">    
            </a>
        </div>

        <div class="col-md-12 emp_info" id="emp_more_4" style="display: none;">
            <div class="emp_info_con">
            </div>
        </div>

        <div class="col-md-4 module">
            <a class="link" href="#emp_more_3" data-id="3">    
            </a>
        </div>

        <div class="col-md-12 emp_info" id="emp_more_3" style="display: none;">
            <div class="emp_info_con">
            </div>
        </div>

        <div class="col-md-4 module">
            <a class="link" href="#emp_more_2" data-id="2">    
            </a>
        </div>

        <div class="col-md-12 emp_info" id="emp_more_2" style="display: none;">
            <div class="emp_info_con">
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-md-4 module">
            <a class="link" href="#emp_more_1" data-id="1">    
            </a>
        </div>

        <div class="col-md-12 emp_info" id="emp_more_1" style="display: none;">
            <div class="emp_info_con">
            </div>
        </div>
    </div>
</div>

        jQuery('.employees a').click(function() {
            var id = jQuery(this).data("id");
            jQuery('.employees .emp_info').hide();
            jQuery('.employees #emp_more_'+id).show();
        });