如何将Bootstrap行分成5个相等的部分？ [英] How to divide bootstrap row into 5 equal parts?

问题描述

我想将 bootstrap 行分成 5个相等部分。它包括 12-col-md ，所以我怎样才能将它分成相等的5个部分？

任何人都可以帮我解决这个问题吗？

解决方案

解决这个问题的好方法是 here ！ b

默认情况下，Bootstrap不提供网格系统允许我们创建五列布局，但正如您所看到的那样，它非常简单。
首先，您需要以Bootstrap的方式创建默认列定义。

  .col-xs-15，
 .col-sm -15，
 .col-md-15，
 .col-lg-15 {
 position：relative; 
 min-height：1px; 
 padding-right：10px; 
 padding-left：10px; 
} 
  

接下来，您需要在不同的媒体查询情况下定义新类的宽度。

  .col-xs-15 {
 width：20％; 
 float：left; 
} 
 @media（min-width：768px）{
 .col-sm-15 {
 width：20％; 
 float：left; 
} 
} 
 @media（min-width：992px）{
 .col-md-15 {
 width：20％; 
 float：left; 
} 
} 
 @media（min-width：1200px）{
 .col-lg-15 {
 width：20％; 
 float：left; 
 
 
 
 
 $ b现在你已经准备好将你的类与原始的Bootstrap类。例如，如果您希望创建在中等屏幕上显示为五列布局的div元素，而在较小的列上显示四列，则只需使用如下所示的内容：
 < div class =row> 
< div class =col-md-15 col-sm-3> 
 ... 
< / div> 
< / div> 
  
 
I want to divide bootstrap row into 5 equal parts. It includes 12-col-md, so how i can divide it into equal 5 parts? 

Can anyone help me to solve this problem? 
解决方案
A great way to resolve this is here!

By default Bootstrap does not provide grid system that allows us to create five columns layout, but as you can see it’s quite simple.
At first you need to create default column definition in the way that Bootstrap do it. I called my classes col-..-15.
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
Next you need to define width of new classes in case of different media queries.
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}
Now you are ready to combine your classes with original Bootstrap classes. For example, if you would like to create div element which behave like five columns layout on medium screens and like four columns on smaller ones, you just need to use something like this:
<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>


                        
这篇关于如何将Bootstrap行分成5个相等的部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！