如何在Bootstrap 3中创建5个相等的列？

Question

我正在创建一个包含10个容器的选择链接.我想要的是将它们分成5个相等的列.现在我的问题是我想扩展列的宽度.意味着container我的父行中没有类.

这是我的示例代码:

<div id="categories-selections">
    <div class="col-md-2 no-padding">
        <img src="public/images/cat1.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat2.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat3.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat4.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat5.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat6.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat7.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat8.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat9.png" class="img-responsive" />
    </div>
    <div class="col-md-2 no-padding">
        <img src="public/images/cat10.png" class="img-responsive" />
    </div>

</div>

这是输出应该是什么:

这就是我所拥有的:

这是所有人,我希望你能帮助我.

这是样本小提琴:https: //jsfiddle.net/mk7bdyey/

Answer 1

您可以一起创建一个全新的列

.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;
    }
}

然后你就可以这样使用了

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