zoukankan      html  css  js  c++  java
  • bootstrap4了解

    .container 类
    @media (min- 1200px)
    .container {
        max- 1140px;
    }
    
    @media (min- 992px)
    .container {
        max- 960px;
    }
    @media (min- 768px)
    .container {
        max- 720px;
    }
    @media (min- 576px)
    .container {
        max- 540px;
    }
    .container {
         100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    
    --------------
    .container-fluid 直接全宽,没有设置媒体断点
    .container-fluid {
         100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .col-sm 由于bootstrap4采用flex,所以可以使用弹性布局,不需要定义具体数值
    @media (min- 576px)
    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max- 100%;
    }
    当然了,还是可以继续使用以前的12栅格布局,不过他们还是用flex写的,不是百分比
    .col-sm-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max- 16.666667%;
    }
    .col 均分
    .col {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max- 100%;
    }
    .col-6 
    .col-6设置一半的宽度
    100/12*5   .col-5    41.66666666666667
    
    .col-{breakpoint}-auto 
    .col-md-auto 设置在不同终端下的具体内容下的宽度
    
    ----------
    在垂直方面上的
      <div class="row align-items-start">
    在水平方面上的
    <div class="row justify-content-start">
    
  • 相关阅读:
    松软科技web课堂:SQLServer之ROUND() 函数
    松软科技web课堂:SQLServer之LEN() 函数
    接口工具比较
    记录EXCEL格式和TXT文本格式之间的互转
    Fiddler安装证书
    Nginx概述及安装配置
    YSLOW(一款实用的网站性能检测工具)
    通用测试用例大全
    Macaca环境配置及样例执行
    ADB命令
  • 原文地址:https://www.cnblogs.com/cyany/p/8632013.html
Copyright © 2011-2022 走看看