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

输出应该是这样的:

这就是我所拥有的:

这就是我希望你能帮助我的所有人。

这是示例 fiddle : 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>