野花--bootstrap一行平均分为5列

在用bootstrap4的时候,因为要分一行5列显示,但是如果直接设置为col-2,就无法完全居中,如果加justify-content-center,那么自动换行就无法从排列在左侧开始,如图

因此,在网上找到了一些大神写的一行5列的代码:

<style>
.col-xs-2-half, .col-sm-2-half, .col-md-2-half, .col-lg-2-half{ position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
 
@media ( min-width : 768px) { .col-sm-2-half{ width: 20%; float: left; } }
 
@media ( min-width : 992px) { .col-md-2-half{ width: 20%; float: left; } }
 
@media ( min-width : 1200px) { .col-lg-2-half{ width: 20%; float: left; } }
</style>

上述的是bootstrap3的版本代码,根据自己所用的版本,更改媒体查询参数,以及float或者改为flex属性即可

bootstrap4 有另外一种简单的写法:使用 row-cols-xl-5 属性

<div class="container">
    <div class="row row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
        <div class="bg-primary p-1 mb-3 border" style="height: 60px"></div>
        <div class="bg-primary p-1 mb-3 border" style="height: 60px"></div>
        <div class="bg-primary p-1 mb-3 border" style="height: 60px"></div>
        <div class="bg-primary p-1 mb-3 border" style="height: 60px"></div>
        <div class="bg-primary p-1 mb-3 border" style="height: 60px"></div>
        <div class="bg-primary p-1 mb-3 border" style="height: 60px"></div>
        <div class="bg-primary p-1 mb-3 border" style="height: 60px"></div>
    </div>
</div>