我想这样订购:
|-------| |--------| |-------| |-------| |---------|
1. item 4. item 7. item 10. item 13. item
2. item 5. item 8. item 11. item 14. item
3. item 6. item 9. item 12. item 15. item
跳水划船不是我的问题。只是按顺序编号。
添加了代码。
ol li.list-group-item {
list-style: decimal inside;
display: list-item;
}
.list-group-item
{
border: 0px!important;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Tom</title>
<style>
ol li.list-group-item {
list-style: decimal inside;
display: list-item;
}
.list-group-item
{
border: 0px!important;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<h6 class="center">The following are all the <bold>Merit Badges</bold> currently offered by the Boy Scouts of America: </h6>
<br>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="list-group">
<ol class="list-group">
<li class="list-group-item">American Business</li>
<li class="list-group-item">American Cultures</li>
<li class="list-group-item font-weight-bold">Citizenship in the Community</li>
<li class="list-group-item">Climbing</li>
</ol>
</div>
</div>
<div class="col-md-2">
<div class="list-group">
<ol class="list-group">
<li class="list-group-item">American Business</li>
<li class="list-group-item">American Cultures</li>
<li class="list-group-item font-weight-bold">Citizenship in the Community</li>
<li class="list-group-item">Climbing</li>
</ol>
</div>
</div>
<div class="col-md-2">
<div class="list-group">
<ol class="list-group">
<li class="list-group-item">American Business</li>
<li class="list-group-item">American Cultures</li>
<li class="list-group-item font-weight-bold">Citizenship in the Community</li>
<li class="list-group-item">Climbing</li>
</ol>
</div>
</div>
<div class="col-md-2">
<div class="list-group">
<ol class="list-group">
<li class="list-group-item">American Business</li>
<li class="list-group-item">American Cultures</li>
<li class="list-group-item font-weight-bold">Citizenship in the Community</li>
<li class="list-group-item">Climbing</li>
</ol>
</div>
</div>
<div class="col-md-2">
<div class="list-group">
<ol class="list-group">
<li class="list-group-item">American Business</li>
<li class="list-group-item">American Cultures</li>
<li class="list-group-item font-weight-bold">Citizenship in the Community</li>
<li class="list-group-item">Climbing</li>
</ol>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>最佳答案
要获得自动编号，您可以使用有序列表。 Flexbox column and wrap 可以很容易地获取列。我用最简单的方式试过了
ol.listNumber {
column-count: 5;
}
但这去掉了编号。
body {
margin: 20px;
}
ol.listNumber {
display: flex;
flex-direction: column;
}
li {
margin: 10px 0;
}
@media screen and (min-width: 520px) {
ol.listNumber {
height: 350px;
flex-wrap: wrap;
}
}
@media screen and (min-width: 760px) {
ol.listNumber {
height: 250px;
}
}
@media screen and (min-width: 960px) {
ol.listNumber {
height: 150px;
}
}<ol class="listNumber">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>关于javascript - 在 Bootstrap 的每一列中排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49000631/