目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

使用我们的响应式浮动实用程序在任何断点上切换任何元素上的浮点数。

概述

这些实用程序类使用CSS float属性根据当前视口大小将元素浮动到左侧或右侧,或禁用浮动。!important包含在内以避免特殊性问题。这些使用与我们的网格系统相同的视口断点。

类别

用类切换浮点数:

<div class="float-left">Float left on all viewport sizes</div><br><div class="float-right">Float right on all viewport sizes</div><br><div class="float-none">Don't float on all viewport sizes</div>

混入

或者是Sass Mixin:

.element {
  @include float-left;}.another-element {
  @include float-right;}.one-more {
  @include float-none;}

响应性

响应性的变化也存在于每一个float值中。

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br><div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br><div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br><div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

这里有所有的支持类。

  • .float-left

  • .float-right

  • .float-none

  • .float-sm-left

  • .float-sm-right

  • .float-sm-none

  • .float-md-left

  • .float-md-right

  • .float-md-none

  • .float-lg-left

  • .float-lg-right

  • .float-lg-none

  • .float-xl-left

  • .float-xl-right

  • .float-xl-none

上一篇:下一篇: