是否有一种工作方式使用CSS自动将排序列表拆分为多个列，其中内容保持垂直排序？我们正在使用Bootstrap，因此可以使用任何相关的帮助程序类。当然不必是Bootstrap相关的解决方案。
到目前为止我们尝试了什么：
Bootstrap网格布局 - >在所有相关浏览器中都能正常工作，但由于它的浮动行为，它总是水平地对内容进行排序
column-count - >保持水平排序，但是有很多显示问题（当它们内部有换行符时，中间的列表项会中断，即使在现代浏览器中也存在许多光学干扰）
你似乎在寻找CSS Multi-column Layout Module。假设您只需将columns类添加到某些.row：
.row.columns {
columns: 3;
/* change number of columns according to needs using `@media` queries */
}
防止.col-*children跨越多列
.columns > [class*="col-"] {
break-inside: avoid;
width: 100%;
float: none;
}
为了获得最大的浏览器兼容性，请在“过滤器”框（左下角）中使用Autoprefixer和> 0%。
概念证明：
.row.columns {
columns: 3;
}
.columns > [class*="col-"] {
break-inside: avoid;
width: 100%;
float: none;
}
@media (max-width: 767px) {
.row.columns {
columns: 2;
}
}
@media (max-width: 479px) {
.row.columns {
columns: 1;
}
}
完全预定的工作片段：
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 0;
}
.row.columns {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
padding-top: 15px;
}
.row.columns > *:first-child > *:first-child{
margin-top: 0;
}
.columns > [class*="col-"] {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
width: 100%;
float: none;
}
@media (max-width: 767px) {
.row.columns {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
}
@media (max-width: 479px) {
.row.columns {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="container-fluid">
<div class="row columns">
<div class="col-sm-12">
<h2>1. HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-sm-12">
<h2>2. CSS</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help ou learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
<p>This is an extra paragraph added so the elements have different height. This is an extra paragraph added so the elements have different height. This is an extra paragraph added so the elements have different height.</p>
<p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-sm-12">
<h2>3. Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can create web your own website.</p>
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-sm-12">
<h2>4. CSS</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help ou learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
<p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-sm-12">
<h2>5. HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-sm-12">
<h2>6. Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can create web your own website.</p>
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-sm-12">
<h2>7. HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-sm-12">
<h2>8. Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can create web your own website.</p>
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
</div>
</div>