我正在创建一个包含10个容器的选择链接.我想要的是将它们分成5个相等的列.现在我的问题是我想扩展列的宽度.意味着我的父行中没有容器类.
@H_502_2@这是我的示例代码：
@H_502_2@这就是我所拥有的： @H_502_2@ @H_502_2@这是所有人,我希望你能帮助我. @H_502_2@这是小提琴样本：
https://jsfiddle.net/mk7bdyey/
<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>
@H_502_2@这是输出应该是什么：@H_502_2@这就是我所拥有的： @H_502_2@ @H_502_2@这是所有人,我希望你能帮助我. @H_502_2@这是小提琴样本：
https://jsfiddle.net/mk7bdyey/
解决方法
您可以一起创建一个全新的列
.col-xs-15,.col-sm-15,.col-md-15,.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
@H_502_2@接下来,您需要在不同媒体查询的情况下定义新类的宽度.
.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;
}
}
@H_502_2@然后你就可以这样使用了
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
