有没有办法使用 Bootstrap 断点 xs、md 等作为分配类的条件?
示例:
<span class="text-large-md text-small-xs">My Text</span>
我只想灵活地分配类(class),具体取决于我的屏幕尺寸(断点)。
更新:Bootstrap 有一些帮助类,比如 hidden-xs。因此,如果您想在小屏幕上的按钮上隐藏文本,您可以使用此类。但是,例如,如果按钮使用固定宽度(由类分配),则按钮大小不会改变。所以我的问题是,如何通过 Bootstrap 根据屏幕大小更改类样式。
最佳答案
你可以用 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;
}
}
关于twitter-bootstrap - Bootstrap 在断点处使用 css 类 (xs,md...),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41130101/