0

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

但是，在较小的屏幕上/在单元格折叠以创建新的动态行时调整大小时，砖形图案会中断。

砖图案示例：http: //plato.acadiau.ca/courses/educ/reid/geometry/brick/Mvc-006s.jpg

当连续有 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>
4

2 回答 2

1

这是我能为你做的最好的：

http://jsfiddle.net/hajpoj/SY7Wr/

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

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

这样做的致命缺陷是它并不总是 100% 包含行：

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

这意味着对于 large、mid、sm，右侧有空白区域......使用引导网格，我认为这是你能做的最好的。否则，您可能需要考虑使用自定义网格系统来使其工作或使用一些 javascript

于 2013-09-13T05:47:26.623 回答
1

这是我想出的，我使用响应式实用程序类来调整砖块的数量，以便在所有断点处保持一切：

<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元素中的每一个都会在您的页面中为您提供 2 行积木。

这是一个演示小提琴

于 2013-09-13T06:18:38.073 回答