html - 如何将 bootstrap 行分成 5 等份？

Question

我想将 bootstrap 行分成 5 等份。它包括 12-col-md，那么我如何将它分成相等的 5 个部分？

谁能帮我解决这个问题？

Answer 1

解决这个问题的一个好方法是 here !

By default Bootstrap does not provide grid system that allows us tocreate five columns layout, but as you can see it’s quite simple. Atfirst you need to create default column definition in the way thatBootstrap 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 differentmedia 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 Bootstrapclasses. For example, if you would like to create div element whichbehave like five columns layout on medium screens and like fourcolumns on smaller ones, you just need to use something like this:

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>