directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

使用这些速记工具快速配置元素的位置。

共同的价值

快速定位类可用,但它们没有响应。

<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>

固定顶部

从边到边放置一个元素在视口的顶部。确保你了解项目中固定职位的影响;您可能需要添加aditional CSS。

<div class="fixed-top">...</div>

固定底部

将元素放置在视口的底部,从边到边。确保你了解项目中固定职位的影响;您可能需要添加aditional CSS。

<div class="fixed-bottom">...</div>

粘顶

将元素放置在视口的顶部,从边到边,但只能在滚过它之后进行。.sticky-top实用程序使用CSS position: sticky,这在所有浏览器中都不完全支持。

Microsoft Edge和IE11将呈现position: sticky为**position: relative。**因此,我们将这些样式封装在@supports查询中,将粘滞性限制为只能正确呈现它的浏览器。

<div class="sticky-top">...</div>
Previous article: Next article: