Twitter bootstrap 在Bootstrap4中，如何仅使用CSS更改字体大小？

我只是从3切换到bootstrap4，我发现不可能更改任何元素的字体大小：h1、p，甚至span

更新：我想根据屏幕大小更改大小。所以使用媒体查询

我想感谢@ZimSystem如何更改屏幕大小，但如何根据媒体对不同屏幕大小的查询进行更改

我的HTML：

<img class="img-responsive mx-auto d-block" src="./assets/brand/cmm.png" />

<div class="row">
<div class="col-md-12 text-center">
<h1><strong>This is sample title</strong></h1>
<h2 class="text-white">South Florida's Community of Creatives Come together</h2>
</div>

</div>

这是示例标题
南佛罗里达州的创意社区走到了一起

这似乎也不起作用

---

那么我是不是错过了什么？或者在Bootstrap 4中，仅使用CSS无法更改字体大小或使其响应（取决于屏幕大小）？

这取决于您如何/在何处更改字体大小。它应该很好用。确保要添加的自定义CSS遵循

bootstrap.CSS

，并且不需要使用

！重要信息

---

演示：

您可以尝试使用大众而不是px。根据我的经验，px不能很好地使用字体

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {  h1 {
     font-size: 30vw;
   }}

 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) { h1 {
     font-size: 100vw;
   }}

 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) { h1 {
     font-size: 150vw;
   } }

 // Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) { 
 h1 {
     font-size: 200vw;
   }

  }

---

只需扩展引导css并进行必要的更改或覆盖您关注的选择器。不需要添加！重要的

@storaged，它不是重复的，因为OP似乎不想更改$font基本大小，而只想更改某些

h1

元素的大小。乔森胡安，当

！重要信息

没有任何效果，可能是您的CSS没有加载/应用，或者是由于文件中以前的某个错误而无效/无效，或者是您使用了错误的选择器。三次检查并使用不同的、更可见的属性，例如

边框

或

背景色

，对其进行测试。请记住，引导不会使用

！重要信息

用于

字体大小

，因此

！重要信息

应适用。这并不意味着你应该使用它。@storaged，这个问题的标题无疑是误导性的，因此是错误的，因为很多用户会来这里寻找另一个问题的答案。如果我是你，我不会删除重复评论。将被证明对很多未来用户有用。谢谢你的回答，我刚刚更新了我的小提琴。你能告诉我如何根据屏幕大小使用媒体查询来获得相同的结果吗？看看媒体查询和响应文本的其他问题（例如：）。这基本上是一个在媒体查询中包装CSS的问题，你想要什么屏幕大小。你能用我的小提琴演示一下吗？它似乎不适用于媒体查询。不要在CSS中使用//作为注释。这打破了媒体的质疑。更新代码：哇！谢谢你指出这一点！我完全忽略了注释语法。谢谢你的帮助！

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {  h1 {
     font-size: 30vw;
   }}

 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) { h1 {
     font-size: 100vw;
   }}

 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) { h1 {
     font-size: 150vw;
   } }

 // Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) { 
 h1 {
     font-size: 200vw;
   }

  }