在列中进行Bootstrap写作(例如报纸) [英] Bootstrap Writing In Columns (like a newspaper)
问题描述
我正在使用django和bootstrap,我想知道是否有一种方法可以像报纸一样写在专栏中.显然,在引导程序中创建列很容易,但是我想知道如何将文本很好地分为几列,所以没有一个列会更长.另外,我将在其中一列的顶部包括一个作家"部分,因此我需要对此进行说明.
I'm using django and bootstrap, and I was wondering if there was a way to write in columns like a newspaper does. Obviously it is easy to create columns in bootstrap, but I was wondering how to have the text divide itself into the columns nicely so there is not one column that is longer. Also I would include a 'writers' section at the top of one of the columns so I would need to account for that.
我正在考虑将列中的单词除以列数,然后我认为在列上会有一个运行,这主要是由于writers部分.
I am thinking of just dividing the words in the columns by the number of columns but then I think that there would be one run on column, mostly because of the writers section.
推荐答案
对于支持它的浏览器 ,您可以使用 columns
css3属性:
For browsers that support it, you can use columns
css3 property:
.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:
Demo in Fiddle
If you need to support older browsers, you can use the polyfill here:
https://github.com/BetleyWhitehorne/CSS3MultiColumn
在样式表后添加脚本,如有必要,它将转换为:
Include the script after your stylesheet and it will convert if neccessary:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="css3-multi-column.js"></script>
或者您也可以使用 Columnizer 使用Javascript来做到这一点,
Or you can do it in Javascript with Columnizer like this:
$('.twoColumns').columnize({ columns: 2 });
这篇关于在列中进行Bootstrap写作(例如报纸)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!