css 5个相等的列引导程序

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 5个相等的列引导程序相关的知识,希望对你有一定的参考价值。

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

以上是关于css 5个相等的列引导程序的主要内容,如果未能解决你的问题,请参考以下文章

如何在引导网格上获得 5 个大小相等的列?

5 个相等的列仅适用于大屏幕 - twitter bootstrap

twitter bootstrap 中的五个相等的列

如何在 bootstrap vue 中创建五个相等的列?

试图让 css 卡翻转以在引导程序中排队

为啥 flex-fill 在引导程序中没有创建相等的宽度?