跳到主要内容
版本：v8

CSS 实用工具

Ionic Framework 提供了一组 CSS 实用工具类，可在任何元素上使用，以修改文本、元素放置或调整内边距和外边距。

important

如果您的应用不是使用可用的 Ionic Framework 启动器启动的，则需要包含全局样式表的可选部分中列出的样式表，这些样式才能正常工作。

文本修改​

文本对齐​

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-start">
        <h3>text-start</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-end">
        <h3>text-end</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-center">
        <h3>text-center</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <div class="ion-text-justify">
        <h3>text-justify</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-wrap">
        <h3>text-wrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-nowrap">
        <h3>text-nowrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
ClassStyle RuleDescription
.ion-text-lefttext-align: left行内内容对齐到行框的左边缘。
.ion-text-righttext-align: right行内内容对齐到行框的右边缘。
.ion-text-starttext-align: start如果方向为从左到右则等同于 text-left，如果方向为从右到左则等同于 text-right。
.ion-text-endtext-align: end如果方向为从左到右则等同于 text-right，如果方向为从右到左则等同于 text-left。
.ion-text-centertext-align: center行内内容在行框内居中对齐。
.ion-text-justifytext-align: justify行内内容两端对齐。文本应均匀分布，使其左右边缘与行框的左右边缘对齐，最后一行除外。
.ion-text-wrapwhite-space: normal空白序列被合并。源文件中的换行符与其他空白字符同样处理。根据需要换行以填充行框。
.ion-text-nowrapwhite-space: nowrap与 normal 一样合并空白，但抑制文本内的换行（文本换行）。

文本转换​

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-uppercase">
        <h3>text-uppercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-lowercase">
        <h3>text-lowercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-capitalize">
        <h3>text-capitalize</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
ClassStyle RuleDescription
.ion-text-uppercasetext-transform: uppercase强制将所有字符转换为大写。
.ion-text-lowercasetext-transform: lowercase强制将所有字符转换为小写。
.ion-text-capitalizetext-transform: capitalize强制将每个单词的首字母转换为大写。

响应式文本类​

上面列出的所有文本类都有额外的类，可以根据屏幕大小修改文本。在每个类中，使用 text-{breakpoint}- 代替 text-，以仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表显示了默认行为，其中 {modifier} 可以是以下任意一项：left、right、start、end、center、justify、wrap、nowrap、uppercase、lowercase 或 capitalize，如上所述。

ClassDescription
.ion-text-{modifier}在所有屏幕尺寸上对元素应用修饰符。
.ion-text-sm-{modifier}当 min-width: 576px 时对元素应用修饰符。
.ion-text-md-{modifier}当 min-width: 768px 时对元素应用修饰符。
.ion-text-lg-{modifier}当 min-width: 992px 时对元素应用修饰符。
.ion-text-xl-{modifier}当 min-width: 1200px 时对元素应用修饰符。

元素放置​

浮动​

float CSS 属性指定元素应放置在其容器的左侧或右侧，文本和内联元素将环绕它。这样，元素脱离了网页的正常流，但仍然保持为流的一部分，这与绝对定位不同。

<ion-grid>
  <ion-row>
    <ion-col>
      <h3>不浮动</h3>
      <img
        alt="人物头部剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>左浮动</h3>
      <img
        alt="人物头部剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-left"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>右浮动</h3>
      <img
        alt="人物头部剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-right"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
  </ion-row>
</ion-grid>
ClassStyle RuleDescription
.ion-float-leftfloat: left元素将浮动在其包含块的左侧。
.ion-float-rightfloat: right元素将浮动在其包含块的右侧。
.ion-float-startfloat: left / float: right如果方向为从左到右则等同于 float-left，如果方向为从右到左则等同于 float-right。
.ion-float-endfloat: left / float: right如果方向为从左到右则等同于 float-right，如果方向为从右到左则等同于 float-left。

响应式浮动类​

上面列出的所有浮动类都有额外的类，可以根据屏幕大小修改浮动行为。在每个类中，使用 float-{breakpoint}- 代替 float-，以仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表显示了默认行为，其中 {modifier} 可以是以下任意一项：left、right、start 或 end，如上所述。

ClassDescription
.ion-float-{modifier}在所有屏幕尺寸上对元素应用修饰符。
.ion-float-sm-{modifier}当 min-width: 576px 时对元素应用修饰符。
.ion-float-md-{modifier}当 min-width: 768px 时对元素应用修饰符。
.ion-float-lg-{modifier}当 min-width: 992px 时对元素应用修饰符。
.ion-float-xl-{modifier}当 min-width: 1200px 时对元素应用修饰符。

元素显示​

显示​

display CSS 属性设置元素是作为块级还是内联框处理，以及用于其子元素的布局，如流式布局、网格或弹性布局。它也可以用于完全从布局中隐藏元素。

Ionic 为 display 提供了以下实用类：

ClassStyle RuleDescription
.ion-display-nonedisplay: none关闭元素的显示，使其对布局没有影响（文档渲染时如同该元素不存在）。
.ion-display-inlinedisplay: inline元素表现为内联元素，不会在其前后创建换行。
.ion-display-inline-blockdisplay: inline-block元素表现为块级元素，但像单个内联框一样与周围内容一起流动。
.ion-display-blockdisplay: block元素表现为块级元素，在正常流中在其前后创建换行。
.ion-display-flexdisplay: flex元素表现为块级元素，并根据弹性盒模型布局其内容。
.ion-display-inline-flexdisplay: inline-flex元素表现为内联元素，并根据弹性盒模型布局其内容。
.ion-display-griddisplay: grid元素表现为块级元素，并根据网格模型布局其内容。
.ion-display-inline-griddisplay: inline-grid元素表现为内联元素，并根据网格模型布局其内容。
.ion-display-tabledisplay: table元素表现为类似 HTML <table> 元素的行为。它定义一个块级框。
.ion-display-table-celldisplay: table-cell元素表现为类似 HTML <td> 元素的行为。
.ion-display-table-rowdisplay: table-row元素表现为类似 HTML <tr> 元素的行为。

响应式显示类​

上面列出的所有显示类都有额外的类，可以根据屏幕大小修改显示行为。在每个类中，使用 display-{breakpoint}- 代替 display-，以仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表显示了默认行为，其中 {modifier} 可以是以下任意一项：none、inline、inline-block、block、flex、inline-flex、grid、inline-grid、table、table-cell、table-row，如上所述。

ClassDescription
.ion-display-{modifier}在所有屏幕尺寸上对元素应用修饰符。
.ion-display-sm-{modifier}当 min-width: 576px 时对元素应用修饰符。
.ion-display-md-{modifier}当 min-width: 768px 时对元素应用修饰符。
.ion-display-lg-{modifier}当 min-width: 992px 时对元素应用修饰符。
.ion-display-xl-{modifier}当 min-width: 1200px 时对元素应用修饰符。

已弃用的类​

弃用通知

以下类已被弃用，并将在下一个主要版本中移除。请改用推荐的 .ion-display-* 类。

ClassDescription
.ion-hide在所有屏幕尺寸上对元素应用 display: none。
已弃用 —— 请改用 ion-display-none 类。
.ion-hide-sm-{dir}当 min-width: 576px（up）或 max-width: 576px（down）时对元素应用修饰符。
已弃用 —— 请改用 ion-display-sm-{modifier} 类。
.ion-hide-md-{dir}当 min-width: 768px（up）或 max-width: 768px（down）时对元素应用修饰符。
已弃用 —— 请改用 ion-display-md-{modifier} 类。
.ion-hide-lg-{dir}当 min-width: 992px（up）或 max-width: 992px（down）时对元素应用修饰符。
已弃用 —— 请改用 ion-display-lg-{modifier} 类。
.ion-hide-xl-{dir}当 min-width: 1200px（up）或 max-width: 1200px（down）时对元素应用修饰符。
已弃用 —— 请改用 ion-display-xl-{modifier} 类。

内容间距​

内边距​

内边距类用于设置元素的内边距区域。内边距区域是元素内容与其边框之间的空间。

默认应用的 padding 值为 16px，由 --ion-padding 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量部分。

<ion-grid>
  <ion-row>
    <ion-col class="ion-padding">
      <div>内边距</div>
    </ion-col>
    <ion-col class="ion-padding-top">
      <div>上内边距</div>
    </ion-col>
    <ion-col class="ion-padding-start">
      <div>起始内边距</div>
    </ion-col>
    <ion-col class="ion-padding-end">
      <div>结束内边距</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-padding-bottom">
      <div>下内边距</div>
    </ion-col>
    <ion-col class="ion-padding-vertical">
      <div>垂直内边距</div>
    </ion-col>
    <ion-col class="ion-padding-horizontal">
      <div>水平内边距</div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>无内边距</div>
    </ion-col>
  </ion-row>
</ion-grid>
ClassStyle RuleDescription
.ion-paddingpadding: 16px为所有边应用内边距。
.ion-padding-toppadding-top: 16px为顶部应用内边距。
.ion-padding-startpadding-start: 16px为起始侧应用内边距。
.ion-padding-endpadding-end: 16px为结束侧应用内边距。
.ion-padding-bottompadding-bottom: 16px为底部应用内边距。
.ion-padding-verticalpadding: 16px 0为顶部和底部应用内边距。
.ion-padding-horizontalpadding: 0 16px为左侧和右侧应用内边距。
.ion-no-paddingpadding: 0所有边均不应用内边距。

外边距​

外边距区域通过一个空白区域扩展边框区域，用于将元素与其相邻元素分隔开。

默认应用的 margin 值为 16px，由 --ion-margin 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量部分。

<ion-grid>
  <ion-row>
    <ion-col class="ion-margin">
      <div>外边距</div>
    </ion-col>
    <ion-col class="ion-margin-top">
      <div>上外边距</div>
    </ion-col>
    <ion-col class="ion-margin-start">
      <div>起始外边距</div>
    </ion-col>
    <ion-col class="ion-margin-end">
      <div>结束外边距</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-margin-bottom">
      <div>下外边距</div>
    </ion-col>
    <ion-col class="ion-margin-vertical">
      <div>垂直外边距</div>
    </ion-col>
    <ion-col class="ion-margin-horizontal">
      <div>水平外边距</div>
    </ion-col>
    <ion-col class="ion-no-margin">
      <div>无外边距</div>
    </ion-col>
  </ion-row>
</ion-grid>
ClassStyle RuleDescription
.ion-marginmargin: 16px为所有边应用外边距。
.ion-margin-topmargin-top: 16px为顶部应用外边距。
.ion-margin-startmargin-start: 16px为左侧应用外边距。
.ion-margin-endmargin-end: 16px为右侧应用外边距。
.ion-margin-bottommargin-bottom: 16px为底部应用外边距。
.ion-margin-verticalmargin: 16px 0为顶部和底部应用外边距。
.ion-margin-horizontalmargin: 0 16px为左侧和右侧应用外边距。
.ion-no-marginmargin: 0所有边均不应用外边距。

Flex 容器属性​

Flexbox 属性分为两类：容器属性控制所有 flex 项目的布局，项目属性控制单个 flex 项目。有关项目级别的对齐，请参阅 Flex 项目属性。

对齐项目​

align-items CSS 属性将 align-self 值作为一个组设置给所有直接子元素。在 flexbox 中，它控制项目在交叉轴上的对齐方式。在网格布局中，它控制项目在其网格区域内沿块轴的对齐方式。

Ionic 为 align-items 提供了以下实用类：

ClassStyle RuleDescription
.ion-align-items-startalign-items: flex-start项目在交叉轴的起始端靠拢。
.ion-align-items-endalign-items: flex-end项目在交叉轴的末端靠拢。
.ion-align-items-centeralign-items: center项目沿交叉轴居中对齐。
.ion-align-items-baselinealign-items: baseline项目对齐，使其基线对齐。
.ion-align-items-stretchalign-items: stretch项目被拉伸以填满容器。

对齐内容​

align-content CSS 属性设置内容项目之间和周围空间在 flexbox 交叉轴或网格/块级元素的块轴上的分布方式。

此属性对单行 flex 容器（即 flex-wrap: nowrap）没有效果。

Ionic 为 align-content 提供了以下实用类：

ClassStyle RuleDescription
.ion-align-content-startalign-content: flex-start行在交叉轴的起始端靠拢。
.ion-align-content-endalign-content: flex-end行在交叉轴的末端靠拢。
.ion-align-content-centeralign-content: center行沿交叉轴居中对齐。
.ion-align-content-stretchalign-content: stretch行被拉伸以填满容器。
.ion-align-content-betweenalign-content: space-between行在交叉轴上均匀分布。
.ion-align-content-aroundalign-content: space-around行均匀分布，周围空间相等。

内容对齐​

justify-content CSS 属性定义了浏览器如何在 flex 容器的主轴以及网格和多列容器的内联轴上分配内容项目之间和周围的空间。

Ionic 为 justify-content 提供了以下实用类：

ClassStyle RuleDescription
.ion-justify-content-startjustify-content: flex-start项目在主轴的起始端靠拢。
.ion-justify-content-endjustify-content: flex-end项目在主轴的末端靠拢。
.ion-justify-content-centerjustify-content: center项目沿主轴居中对齐。
.ion-justify-content-aroundjustify-content: space-around项目在主轴上均匀分布，周围空间相等。
.ion-justify-content-betweenjustify-content: space-between项目在主轴上均匀分布。
.ion-justify-content-evenlyjustify-content: space-evenly项目分布使任意两个项目之间的间距相等。

弹性方向​

flex-direction CSS 属性设置 flex 项目在 flex 容器中的放置方式，定义主轴和方向（正常或反向）。

Ionic 为 flex-direction 提供了以下实用类：

ClassStyle RuleDescription
.ion-flex-rowflex-direction: row项目沿文本方向排列。
.ion-flex-row-reverseflex-direction: row-reverse项目沿文本方向的反方向排列。
.ion-flex-columnflex-direction: column项目垂直排列。
.ion-flex-column-reverseflex-direction: column-reverse项目以相反顺序垂直排列。

弹性换行​

flex-wrap CSS 属性设置 flex 项目是强制在一行上还是可以换行到多行。如果允许换行，它设置行的堆叠方向。

Ionic 为 flex-wrap 提供了以下实用类：

ClassStyle RuleDescription
.ion-flex-nowrapflex-wrap: nowrap所有项目将在同一行上。
.ion-flex-wrapflex-wrap: wrap项目将换行到多行，从上到下排列。
.ion-flex-wrap-reverseflex-wrap: wrap-reverse项目将换行到多行，从下到上排列。

响应式 Flex 容器类​

上面列出的所有 flex 容器类都有额外的类，可以根据屏幕大小修改属性。使用 {property}-{breakpoint}-{modifier} 代替基本类名，以仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表显示了默认行为，其中 {property} 可以是以下任意一项：justify-content、align-content、align-items、flex 或 flex-wrap，而 {modifier} 是如上所述的对应值。

ClassDescription
.ion-{property}-{modifier}在所有屏幕尺寸上对元素应用修饰符。
.ion-{property}-sm-{modifier}当 min-width: 576px 时对元素应用修饰符。
.ion-{property}-md-{modifier}当 min-width: 768px 时对元素应用修饰符。
.ion-{property}-lg-{modifier}当 min-width: 992px 时对元素应用修饰符。
.ion-{property}-xl-{modifier}当 min-width: 1200px 时对元素应用修饰符。

已弃用的类​

弃用通知

以下类已被弃用，并将在下一个主要版本中移除。请改用推荐的 .ion-flex-* 类。

ClassDescription
.ion-nowrap所有项目将在同一行上。
已弃用 —— 请改用 .ion-flex-nowrap。
.ion-wrap项目将换行到多行，从上到下排列。
已弃用 —— 请改用 .ion-flex-wrap。
.ion-wrap-reverse项目将换行到多行，从下到上排列。
已弃用 —— 请改用 .ion-flex-wrap-reverse。

Flex 项目属性​

Flex 项目属性控制单个 flex 项目在其 flex 容器中的行为。另请参阅：Flex 容器属性了解容器级别的对齐。

自身对齐​

align-self CSS 属性覆盖网格或 flex 项目的 align-items 值。在网格中，它对齐项目在网格区域内。在 flexbox 中，它在交叉轴上对齐项目。

此属性不适用于块级框或表格单元格。如果 flexbox 项目的交叉轴外边距为 auto，则 align-self 将被忽略。

Ionic 为 align-self 提供了以下实用类：

ClassStyle RuleDescription
.ion-align-self-startalign-self: flex-start项目在交叉轴的起始端靠拢。
.ion-align-self-endalign-self: flex-end项目在交叉轴的末端靠拢。
.ion-align-self-centeralign-self: center项目沿交叉轴居中对齐。
.ion-align-self-baselinealign-self: baseline项目对齐，使其基线与其他项目基线对齐。
.ion-align-self-stretchalign-self: stretch项目被拉伸以填满容器。
.ion-align-self-autoalign-self: auto项目根据父元素的 align-items 值定位。

弹性​

flex CSS 属性是 flex-grow、flex-shrink 和 flex-basis 的简写属性。它设置 flex 项目如何增长或收缩以适应其 flex 容器中的可用空间。

Ionic 为 flex 提供了以下实用类：

ClassStyle RuleDescription
.ion-flex-1flex: 1项目与其他 flex 项目同等地增长和收缩。
.ion-flex-autoflex: auto项目根据其内容大小增长和收缩。
.ion-flex-initialflex: initial项目收缩到最小内容大小但不增长。
.ion-flex-noneflex: none项目不增长也不收缩。

弹性增长​

flex-grow CSS 属性设置 flex 增长因子，指定应在多大程度上将 flex 容器的正自由空间分配给 flex 项目的主尺寸。

Ionic 为 flex-grow 提供了以下实用类：

ClassStyle RuleDescription
.ion-flex-grow-0flex-grow: 0项目不会增长超过其内容大小。
.ion-flex-grow-1flex-grow: 1项目按比例增长以填满可用空间。

弹性收缩​

flex-shrink CSS 属性设置 flex 项目的收缩因子。如果所有 flex 项目的总大小大于 flex 容器，flex 项目可以根据其 flex-shrink 值收缩以适应。每个 flex 行的负自由空间在具有大于 0 的 flex-shrink 值的行内 flex 项目之间分配。

Ionic 为 flex-shrink 提供了以下实用类：

ClassStyle RuleDescription
.ion-flex-shrink-0flex-shrink: 0项目不会收缩到其内容大小以下。
.ion-flex-shrink-1flex-shrink: 1当容器太小时，项目按比例收缩。

排序​

order CSS 属性设置在 flex 或网格容器中项目的排列顺序。容器中的项目按升序的 order 值排序，然后按源代码顺序排序。未指定显式 order 值的项目被分配默认值 0。

Ionic 为 order 提供了以下实用类：

ClassStyle RuleDescription
.ion-order-firstorder: -1项目在 flex 容器中首先出现。
.ion-order-0order: 0项目以其自然顺序出现。
.ion-order-1order: 1项目出现在 order 为 0 的项目之后。
.ion-order-2order: 2项目出现在 order 为 1 的项目之后。
.ion-order-3order: 3项目出现在 order 为 2 的项目之后。
.ion-order-4order: 4项目出现在 order 为 3 的项目之后。
.ion-order-5order: 5项目出现在 order 为 4 的项目之后。
.ion-order-6order: 6项目出现在 order 为 5 的项目之后。
.ion-order-7order: 7项目出现在 order 为 6 的项目之后。
.ion-order-8order: 8项目出现在 order 为 7 的项目之后。
.ion-order-9order: 9项目出现在 order 为 8 的项目之后。
.ion-order-10order: 10项目出现在 order 为 9 的项目之后。
.ion-order-11order: 11项目出现在 order 为 10 的项目之后。
.ion-order-12order: 12项目出现在 order 为 11 的项目之后。
.ion-order-lastorder: 13项目在 flex 容器中最后出现。

响应式 Flex 项目类​

上面列出的所有 flex 项目类都有额外的类，可以根据屏幕大小修改属性。使用 {property}-{breakpoint}-{modifier} 代替基本类名，以仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表显示了默认行为，其中 {property} 可以是以下任意一项：align-self、flex、flex-grow、flex-shrink 或 order，而 {modifier} 是如上所述的对应值。

ClassDescription
.ion-{property}-{modifier}在所有屏幕尺寸上对元素应用修饰符。
.ion-{property}-sm-{modifier}当 min-width: 576px 时对元素应用修饰符。
.ion-{property}-md-{modifier}当 min-width: 768px 时对元素应用修饰符。
.ion-{property}-lg-{modifier}当 min-width: 992px 时对元素应用修饰符。
.ion-{property}-xl-{modifier}当 min-width: 1200px 时对元素应用修饰符。

边框显示​

.ion-no-border 实用类可用于移除 Ionic 组件的边框。此类可应用于 ion-header 和 ion-footer 组件。

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>页眉 - 无边框</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>页脚 - 无边框</ion-title>
  </ion-toolbar>
</ion-footer>
ClassDescription
.ion-no-border元素将没有边框。

Ionic 断点​

Ionic 在媒体查询中使用断点，以根据屏幕尺寸对应用进行不同的样式设置。上述实用类中使用了以下断点名称，当满足宽度条件时该类将生效。

断点名称宽度
xs0
sm576px
md768px
lg992px
xl1200px

目录

编辑此页