Bootstrap 里如何将固定的12列分配成自定义的列数

Bootstrap 采用的12栅格系统，即每行均分为12等分。 在有些场景下，元素占据的宽度不能给12栅格均分。 例如我想每行显示9个元素，9不是12的整除数，这时候就需要将 Bootstrap 默认的12栅格修改成自己想要的栅格数。 首先了解12栅格是怎么用的。 以下代码将每行均分为4等份，没等份3个栅格宽度。 <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> </div> Bootstrap 中对 col-md-3 的定义是： @media (min-width:768px){ .col-md-auto{flex:0 0 auto;width:auto} .col-md-1{flex:0 0 auto;width:8.33333333%} .col-md-2{flex:0 0 auto;width:16.66666667%} .col-md-3{flex:0 0 auto;width:25%} ... } 100除以12的结果是 8.33333333，100除以4的结果 25，所以能知道 width 的含义了吧 那我们就自定义9栅格: @media (min-width:768px){ .col-md-custom-9{flex:0 0 auto;width:11.1111111%} } 这时候，我们就可以将页面9等份了，代码如下： <div class="container"> <div class="row"> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> <div class="col-md-custom-9"></div> </div> </div>