野花--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>