如何打印带有双栏布局A4页面的问题纸?

时间:2016-11-09 12:31:04

标签: jquery html css twitter-bootstrap media-queries

ol li使用两列布局进行打印。 ol包含的内容超过 80 li。 我使用了bootstrap 3.如果li到达页面末尾,则转到下一列。如果两列到达ol li,则从下一页开始 例如

I Need This:
 Column 1 (col-md-6)            Column 2 (col-md-6)
 List 1                         List 6       
 ---                            ---  
 List 2                         List 7  
 ---                            ---
 List 3                         List 8 
 ---                            ---
 List 4                         List 9 (Long Question. This is End Column 2)
 ---                            ---  
 List 5(This is End Column 1)
 ---
 <!----------- THIS IS END OF PAGE 1 --------------->
<!----------- PAGE 2 START --------------->
 Column 3 (col-md-6) 
 List 10
 --- 
 List 11 
 ---  
 List 12
 ---
 List 13(This is End Column 3)
<!----------- THIS IS END OF PAGE 2 --------------->

Sample Demo

在此演示中: 21和22列表项目位于第二页..但实际上这位于第一页第2列顶部。列表44也位于第三列顶部。但现在它被错误地放在第二列。

enter image description here

注意:我准备问题文件。所以我需要两列打印A4纸。我需要一些建议.. 是否可以与Jquery和CSS一起使用?

1 个答案:

答案 0 :(得分:1)

而不是bootstrap网格使用css3 coulmn属性,比如

ol {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
ol {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

此处column-count: 2;将创建两个网格,将所有li分成2column-gap: 40px;是两个网格之间的空格。