【栅格系统分为12列,怎么分成5列? _bottstrap 】

栅格系统分为12列,怎么分成5列?

我也踩过这个坑( 4 )

已统计您的踩坑,无需重复点击

回答(5)

bottstrap

详细描述

截图

代码

<div class="container">  
  <div class="row">  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
  </div>

编辑于2024-11-23

时间排序

热门排序

[散修弟子]JS-1730
1

把col-md-1改为col就5列布局了，但是在小屏幕时不能达到任务要求，设置col-xs col-sm col-md col-lg,每个单独设置数字可以解决，也可以用媒体查询，在不同屏幕宽度下，改变盒子宽度，高度

查看全部>

编辑于2018-05-22
[郑州|结业弟子]JS-陈占乐
0

这个问题主要是重置bootstrap 内置栅格系统，使用自定义栅格达到5列布局的目的。
这是bootstrap3.37中关于栅格系统部分的样式，下面主要是 .col-xs 部分，其它宽度相似
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
主要是两部分：栅格全部左浮动，不同列数占用container 相应的百分比宽度。
使用自定义类名重写上面样式，假设10列，不同列数相应宽度为：10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
在HTML中写入相应类名，调用相应宽度。

查看全部>

编辑于2018-08-24
[上海|荣耀师兄]JS-卢关清
0

可以使用媒体查询：
html：

        <h3>战略合作企业</h3>
        <div class="container">
            <div class="row fles">
                <div class="main-four">
                    <img src="../img/qianniu.png">
                </div>
                <div class="main-four">
                    <img src="../img/jinshanyun.png">
                </div>

                <div class="main-four">
                    <img src="../img/albb.png">
                </div>
                <div class="main-four">
                    <img src="../img/oioiok.png">
                </div>
                <div class="main-four">
                    <img src="../img/huanxin.png">
                </div>
            </div>
        </div>
css：
@media (min-width: 1000px) {
.main-four {
    width: 20%;
}
}
@media (max-width: 1000px) {
.main-four {
    width: 55%;
}
}

查看全部>

编辑于2019-03-23
[成都|结业弟子]JS-彭力
0

用媒体查询。

查看全部>

编辑于2019-04-14
[北京|]JS-
0

1 2 2 2 2 2 1

查看全部>

编辑于2019-11-04

去第页