列中的Bootstrap写作(如报纸)

Question

我正在使用django和bootstrap,我想知道是否有一种方法可以像报纸一样写入列.显然,在bootstrap中创建列很容易,但我想知道如何让文本很好地分成列,这样就没有一列更长.另外,我会在其中一列的顶部包含一个"编写者"部分,因此我需要考虑到这一点.

我想只是将列中的单词除以列数,但我认为列上会有一次运行,主要是因为编写器部分.

Answer 1

对于支持它的浏览器,您可以使用columnscss3属性:

.twoColumns{
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
}

<div class="twoColumns">
    Sed ut perspiciatis unde omnis iste natus error ...
</div>

小提琴演示

如果您需要支持旧浏览器,可以在此处使用polyfill:

https://github.com/BetleyWhitehorne/CSS3MultiColumn

在样式表后包含脚本,如果需要,它将转换:

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="css3-multi-column.js"></script>

或者你可以在Javascript with Columnizer中这样做:

$('.twoColumns').columnize({ columns: 2 });