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">
    
  • 相关阅读:
    python变量及简单数据类型
    python函数小案例
    python字符串和列表小案例
    python循环输出
    Jmeter测试工具
    操作系统-进程管理~
    操作系统~
    组成原理第一章笔记~
    分时间段(年份或月份)统计,没有数字补0 Java(替代 MYSQL) 做法
    组成原理复习概略
  • 原文地址:https://www.cnblogs.com/cyany/p/8632013.html
Copyright © 2011-2022 走看看