Twitter bootstrap 在Bootstrap3.0中，如何添加网格单元格或动态调整交替行中第一个单元格的边距？

我需要创建一个砖块图案，其中每隔一行的第一块砖块是一半。当您知道一行中有多少个单元格时，可以通过在网格中使用半列宽来实现这一点

但是，在较小的屏幕上/当单元格折叠以创建新的动态行时，砖块图案会断裂

砖块图案示例：

当一行中有5个单元格时，下面的代码将起作用。如果屏幕大小调整为一行只有3个单元格，则第三行将不会按预期以半砖开始，图案将中断

<div class="row">
            <div class="col-xs-3 col-sm-2 col-md-1 col-lg-1 halfbrick"></div>                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
        </div>    

        <div class="row">                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
        </div>    

        <div class="row">
            <div class="col-xs-3 col-sm-2 col-md-1 col-lg-1 halfbrick "></div>                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
 </div>                

---

这是我能为您做的最好的事情：

此操作的致命缺陷是，它并不总是100%包含行：

• 大：宽度的11/12%
• 中间：宽度的10/12%
• sm：宽度的10/12%
• xs：宽度的12/12%

这意味着对于大、中、sm，右侧有空白。。。

---

使用引导网格，我认为这是您所能做的最好的。否则，您可能需要考虑使用自定义网格系统来工作，或者一些JavaScript < /P> < P>这是我提出的，我使用响应实用程序类来调整砖块的数量，以使所有的东西都保持在所有断点处：

<div class="row">
    <div class="col-xs-3 col-sm-2 col-md-2 brick"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 brick"></div>
    <div class="col-xs-3 col-sm-4 col-md-3 brick"></div>
    <div class="col-xs-6 col-sm-2 col-md-3 brick"></div>
    <div class="col-xs-6 col-sm-4 col-md-1 brick"></div>
    <div class="col-xs-3 col-sm-4 col-md-3 brick hidden-xs"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 brick hidden-xs"></div>
    <div class="col-xs-3 col-sm-2 col-md-3 brick hidden-xs hidden-sm"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 brick hidden-xs hidden-sm"></div>
</div>

这些

.row

元素中的每一个都将在页面中为您提供两行砖块

---

这里有一个

感谢您提出解决方案。这绝对有效。我选择前面的答案是因为它满足一个基本的业务需求。砖块将包含一些数据，并且在调整屏幕大小时不能隐藏一些面板。使用实用程序类自动隐藏是解决基本模式问题的一种很酷的方法。。

<div class="row">
    <div class="col-xs-3 col-sm-2 col-md-2 brick"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 brick"></div>
    <div class="col-xs-3 col-sm-4 col-md-3 brick"></div>
    <div class="col-xs-6 col-sm-2 col-md-3 brick"></div>
    <div class="col-xs-6 col-sm-4 col-md-1 brick"></div>
    <div class="col-xs-3 col-sm-4 col-md-3 brick hidden-xs"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 brick hidden-xs"></div>
    <div class="col-xs-3 col-sm-2 col-md-3 brick hidden-xs hidden-sm"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 brick hidden-xs hidden-sm"></div>
</div>