css - 在响应式布局中使用 CSS 垂直排序的多列

Question

是否有一种工作方式可以使用 CSS 自动将排序列表拆分为多个列，其中内容保持垂直排序？我们正在使用 Bootstrap，因此可以使用任何相关的辅助类。当然不一定是与 Bootstrap 相关的解决方案。

到目前为止我们尝试了什么:

Bootstrap 网格布局-> 在所有相关浏览器中工作正常，但由于它的 float 行为，总是水平排序内容

列数-> 保持水平排序，但有很多显示问题(当列表项内部有换行符时，列表项会在中间中断，即使在现代浏览器中也会有很多光学干扰)

Answer 1

您似乎在寻找CSS Multi-column Layout Module .假设您只是将一个 columns 类添加到一些 .row 中:

.row.columns {
  columns: 3; 
  /* change number of columns according to needs using `@media` queries */
}

防止.col-* child 跨多列

.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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
        </div>
    </div>
</div>