CSS

Bootstrap 4 alpha 新特性介绍

昨日 Bootstrap 官方发布了 4-alpha 版本,该版本的主要变更如下: 从 Less 迁移到 Sass。 Bootstrap 依靠 Libsass 拥有了前所未有的编译速度,我们也加入了蒸蒸日上的 Sass 开发者委员会。 改进的网格系统。 我们添加了一个新的网格层用于更好的支持移动设备,并全面检查我们的语义 mixin。 可选的弹性盒子支持。 未来近在咫尺——将一个布尔变量设为 true 之后重新编译 CSS 就可以体验到弹性盒布局的网格和组件的强大。 well、thumbnail 和 panel 组件统一为

  • George Chung
    George Chung
2 min read
CSS

CSS 中 inline-block 两端对齐的解决方案

CSS 中实现两端对齐效果一般是采用 Flexbox 的方式解决,但是 Flexbox 的兼容性问题使得其在目前的前端领域应用性不高,但是实现两端对齐还有一个传统的 CSS 语法是text-align: justify。当我们对inline-block块所属的容器施加text-align: justify时,效果如下: 可见text-align: justify方法可以让第一行实现两端对齐,但是不能控制第二行(最后一行)的对齐方式。 解决这个问题要用一点小技巧,就是使用父块的::after伪元素强制作为父块的最后一行。这样就可以让第二行成为非最后一行,从而成功套用justify对齐方式。 具体实现方式如下: ul::after { content: ''; display: inline-block; width: 100%

  • George Chung
    George Chung
2 min read