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 --------------->
在此演示中: 21和22列表项目位于第二页..但实际上这位于第一页第2列顶部。列表44也位于第三列顶部。但现在它被错误地放在第二列。
注意:我准备问题文件。所以我需要两列打印A4纸。我需要一些建议.. 是否可以与Jquery和CSS一起使用?
答案 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
分成2
,column-gap: 40px;
是两个网格之间的空格。