【栅格系统分为12列,怎么分成5列? _bottstrap 】 | IT修真院·坑乎
问题已收录 栅格系统分为12列,怎么分成5列?
我也踩过这个坑( 4 )
已统计您的踩坑,无需重复点击
回答(5)
bottstrap
详细描述
截图
代码
编辑于2021-09-24
  • [散修弟子]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:

     <!-- main第四块 -->
            <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