引导程序。如何更改不同 col-* 尺寸的样式？答案

【问题标题】：Bootstrap. How to change styles for different col-* sizes?引导程序。如何更改不同 col-* 尺寸的样式？
【发布时间】：2016-05-03 21:50:09
【问题描述】：

如何在调整浏览器窗口大小时更改例如 Bootstrap 中的文本大小？或者如果 col-xs 会变小，如果 col-md 会变大？

<div class="col-xs-6 col-md-3">
text
</div>

我应该使用：

@media (min-width: 991px) {
}

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

是的，使用媒体查询可以做到这一点。

HTML：

 <div class="col-xs-6 col-md-3 sometext">
        text
 </div>

CSS：

@media screen and(min-width: 991px) {
    .sometext {
       font-size:10px ; //for example
    }
}

Refer this for more information on media queries

【讨论】：

我认为它应该是 'min-width: 992px'，因为 bootstrap 在 991px 处显示较小的屏幕布局（对于 col-md）但是如果 'min-width' 仍然会应用 '.sometext' : 991px' 被使用。这只会影响正好 991 像素宽的屏幕，所以可能不是什么大问题！

【解决方案2】：

我经常遇到这种情况（通常是根据媒体大小更改文本对齐方式），这是我在引导程序中使用的方法。马上，唯一的缺点是复制了 div 中的内容。但是，这很容易通过将内容存储为 Razor 变量或使用 jQuery 来解决。我不一定喜欢这种方法，但我发现它是解决此问题的最佳方法。

另外需要注意的是，在使用引导程序时，我经常明确地编写四个引导程序媒体大小案例中的每一个，只是为了排除解释性猜测工作，即使它是多余的。

.sometext {
    font-size: 10px;
    }

<div class="col-xs-6 col-sm-6 hidden-md hidden-lg">
text
</div>

<div class="hidden-xs hidden-sm col-md-3 col-lg-3 sometext">
text
</div>

【讨论】：

【解决方案3】：

您可以使用vw units 执行此操作。

例如，带有<p> 标签：

p {
    font-size: 30px;
    font-size: 3.5vw;
}

或者..

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

见Viewport Sized Typography

【讨论】：