admin管理员组文章数量:1611398
文章の目录
- 1、常用的类(class)
- 2、固定在顶部
- 3、固定在底部
- 4、黏着在顶部
- 写在最后
利用这些工具类快速设置元素的位置。
1、常用的类(class)
Bootstrap 提供了一组用于为元素快速定位的类,但是不支持响应式布局。
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
2、固定在顶部
将一个元素固定在视口(viewport)的顶部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
<div class="fixed-top">...</div>
3、固定在底部
将一个元素固定在视口(viewport)的底部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
<div class="fixed-bottom">...</div>
4、黏着在顶部
当页面滚动并经过某个元素之后,该元素被固定在视口(viewport)的顶部且边缘对齐。.sticky-top
工具类利用的是 CSS 的 position: sticky
属性,并非所有浏览器都支持该属性。
IE11 和 IE10 会将 position: sticky
渲染为 position: relative
。 因此,我们将该样式包裹在 @supports
查询内,从而只在支持该属性的浏览器中应用此样式。
<div class="sticky-top">...</div>
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
版权声明:本文标题:Bootstrap系列之定位(Position) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1728603750a1165187.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论