zoukankan      html  css  js  c++  java
  • Bootstrap 4 网格的基本结构

    Bootstrap 4 网格的基本结构

    网格类

    Bootstrap 4 网格系统有以下 5 个类:

    • .col- 针对所有设备 
    • .col-sm- 平板 - 屏幕宽度等于或大于 576px
    • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
    • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
    • .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

    网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。

    • 使用行来创建水平的列组。
    1 1 1 1 1 1 1 1 1 1 1 1
    4 4 4
    4 8
    6 6
    12
    <!-- 让 Bootstrap 者自动处理布局 -->
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col-(表示响应的设备: sm,md,lg或xl)-(表示一个数字, 同一行的数字相加为 12)"></div>
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
    </div>

    offset-*-* 类来设置偏移列。第一个星号( * )可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号( * )可以是 1 到 11 的数字。

    为了在大屏幕显示器上使用偏移

  • 相关阅读:
    第一行DOCTYPE 的作用
    es6 proxy、handler.get()
    vue router-link 默认a标签去除下划线
    打开记事本
    JS数组遍历的方法
    vue项目中使用proxy解决跨域
    封装axios
    postMessage vue iframe传值
    input限制只能输入数字,且保留小数后两位
    axios封装
  • 原文地址:https://www.cnblogs.com/embaobao/p/10720830.html
Copyright © 2011-2022 走看看