Question

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

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

我应该使用：

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

Answer 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

Answer 2

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

另外需要注意的是，当使用bootstrap时，我经常明确地写出四个引导媒体大小情况中的每一个，只是为了抛出解释性猜测工作，即使它是多余的。

.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>

Answer 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

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

3 个答案: