Question

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

到目前为止我们尝试过：

Bootstrap网格布局 - ＆GT;在所有相关的浏览器中都可以正常工作，但由于它的浮动行为，它总是水平地对内容进行排序

列计数 - ＆GT;保持水平排序，但有很多显示问题（当它们内部有换行符时，在中间打破列表项，即使在现代浏览器中也有许多光学干扰）

Answer 1

您似乎在寻找CSS Multi-column Layout Module。假设您只需将columns类添加到某些.row：

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

防止.col-*个孩子跨越多个列

.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>

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

1 个答案: