Bootstrap 在断点处使用 css 类（xs，md ...）

Question

有没有办法使用引导断点 xs、md 等作为分配类的条件？

例子：

<span class="text-large-md text-small-xs">My Text</span>

我只是想灵活地分配类，具体取决于我的屏幕尺寸（断点）。

更新：Bootstrap 有像 hide-xs 这样的帮助器类。因此，如果您想隐藏小屏幕上按钮上的文本，可以使用此类。但是，如果按钮例如使用固定宽度（由类分配），则按钮大小不会改变。所以我的问题是，如何通过引导程序根据屏幕尺寸更改类样式。

Answer 1

您可以使用 LESS 编写类似的内容（如果您使用 Bootstrap 的 LESS 进行编译）：

// Responsive text
/**
  * Bootstrap's LESS variables:
      @screen-sm-min:   768px;
      @screen-md-min:   992px;
      @screen-lg-min:   1200px;
      @font-size-base:  14px;
      @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
      @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
  */

.text-xs-small    { font-size: @font-size-small; }
.text-xs-large    { font-size: @font-size-large; }

@media (min-width: @screen-sm-min) {
  .text-sm-small  { font-size: floor((@font-size-small * 1.1)); }
  .text-sm-large  { font-size: floor((@font-size-large * 1.1)); }
}

@media (min-width: @screen-md-min) {
  .text-md-small  { font-size: floor((@font-size-small * 1.3)); }
  .text-md-large  { font-size: floor((@font-size-large * 1.3)); }
}

@media (min-width: @screen-lg-min) {
  .text-lg-small  { font-size: floor((@font-size-small * 1.5)); }
  .text-lg-large  { font-size: floor((@font-size-large * 1.5)); }
}

或者只是CSS：

.text-xs-small {
  font-size: 12px;
}
.text-xs-large {
  font-size: 18px;
}
@media (min-width: 768px) {
  .text-sm-small {
    font-size: 13px;
  }
  .text-sm-large {
    font-size: 19px;
  }
}
@media (min-width: 992px) {
  .text-md-small {
    font-size: 15px;
  }
  .text-md-large {
    font-size: 23px;
  }
}
@media (min-width: 1200px) {
  .text-lg-small {
    font-size: 18px;
  }
  .text-lg-large {
    font-size: 27px;
  }
}