如何在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>

Answer 2

根据您的要求左右调整填充到您div的{​​{1}}。你可以把像id="categories-selections"

这样的内联css放进去