zoukankan      html  css  js  c++  java
  • Bootstrap 3 -> 4 : 居中布局的变化

    我们知道,Bootstrap布局的核心是栅格系统,一行有12个栅格。

    比如,我想让两个宽度400px左右的div居中显示。

    这个时候,我们可以利用栅格的列偏移功能。

    <div class="row">
      <div class="col-md-4 col-md-offset-2">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

    但这仅适用于Bootstrap 3 。

    因为Bootstrap 4 把列偏移给移除了。

      <div class="row justify-content-center">
        <div class="col-4">
          One of two columns
        </div>
        <div class="col-4">
          One of two columns
        </div>
      </div>

    有的同学可能会觉得这个justify-content-center有点眼熟:这不是弹性盒子(display:flex)里面的东西吗?

    没错,Bootstrap 4的布局系统引入了弹性盒子(display:flex)。

    这也意味着,Bootstrap 4的兼容性变差了。

    而官方文档也是这么说的。

    Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.

    放弃了IE8 IE9 IOS6的支持,Bootstrap 4只支持IE10+和IOS7+的浏览器。如果你需要支持,请用Bootstrap 3。

    而文档里也明确说明引入了弹性盒子(display:flex)。

    Moved to flexbox.
        Added support for flexbox in the grid mixins and predefined classes.
        As part of flexbox, included support for vertical and horizontal alignment classes.

    Bootstrap 3 -> 4所有变化的官方说明:

    https://v4.bootcss.com/docs/4.0/migration/

  • 相关阅读:
    Google基本利用
    sqlmap
    kali中wireshark打开后错误
    Python Flask Jinja2模板引擎
    Python Flask学习
    Python 豆瓣日记爬取
    Python 函数装饰器
    Python 生成器
    ss源码学习--从协议建立到完成一次代理请求
    ss源码学习--工作流程
  • 原文地址:https://www.cnblogs.com/foxcharon/p/9415036.html
Copyright © 2011-2022 走看看