css - Bootstrap 。屏幕小时更改样式

Question

我对 Bootstrap LESS 3.1.1 进行了一些测试，发现在使网站响应时，某些样式在页面大和小等情况下看起来不太好。

所以我尝试进行一些更改，例如向某些元素添加 font-weight:bold 或添加更多填充或将其向左对齐等，只是因为我喜欢在屏幕为“时将列折叠成一列” xs"但这改变了布局，我需要重新定义一些样式。

我正在使用自定义样式并使用混合等将它们与 Bootstrap LESS 结合起来，我想知道是否有一种方法可以说“在小的时候做这个”或“在中等的时候做这个”。我知道我有媒体查询，但除非我有“@media @small”或类似的，否则它不会像它应该的那样适合 bootstrap，即使我这样做，我仍然觉得 Bootstrap 可能已经包含了一些混合这样做。

有谁知道这样做的好方法吗？

干杯。

Answer 1

我认为答案可能是这样的，因为它在 Bootstrap 文档中:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

即便如此，我还是想看看是否还有其他方法，但看起来就是这样(因为它使用 Bootstrap 变量，所以它总是适合)。