twitter-bootstrap 多列定义列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16110794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multi-column definition list
提问by Falantar014
I have a <dl>like so:
我有一个<dl>这样的：
<dl>
<dt id="a_1">Quantity:
<dd id="a_2">
<dt id="b_1">Size:
<dd id="b_2">
<dt id="c_1">Rise:
<dd id="c_2">
<dt id="d_1">Color:
<dd id="d_2">
....
</dl>
This list is generated dynamically through php. I have a container of a certain height. What is the best way to make this list into two columns when it gets too large? If possible, I would like to keep it as a dl though it's not absolutely necessary.
这个列表是通过php动态生成的。我有一个一定高度的容器。当它变得太大时，将此列表分成两列的最佳方法是什么？如果可能，我想将它保留为 dl，尽管它不是绝对必要的。
If it helps at all, I'm using bootstrap.
如果它有帮助，我正在使用引导程序。
回答by cimmanon
The most elegant way would be to use the CSS columns properties:
最优雅的方法是使用 CSS 列属性：
http://codepen.io/cimmanon/pen/tcyHv
http://codepen.io/cimmanon/pen/tcyHv
dl {
columns: 2;
}
dd {
break-before: avoid;
}
Support for it is fairly good, but Firefox doesn't honor the break-beforeproperty (which is being used to prevent the definition from ending up in a different column from its term). Adding prefixes may be necessary.
对它的支持相当好，但 Firefox 不尊重该break-before属性（该属性用于防止定义在与其术语不同的列中结束）。可能需要添加前缀。
