更改网格系统中的字体大小答案

【问题标题】：Change the font-size in grid system更改网格系统中的字体大小
【发布时间】：2019-03-28 14:37:58
【问题描述】：

我正在使用网格系统显示 7 个小图像，每个图像旁边都有一个数字，它应该类似于 this。在第一个示例中，我没有使用网格系统，但它要复杂得多，我花了 60 到 120 分钟来完成它，使用网格系统我花了不到 10 分钟，但我无法调整字体大小。看看here

我尝试覆盖任何可能的字体大小属性，我还尝试为 div 提供更多类并更改字体大小。

注意：不过，我可以轻松更改字体系列。

 <div class="container" style="float: left; font-family: 'Germania One', cursive;">
        <div class="row">
          <div class="col">
            <img src="forca.png" alt=""> 2
          </div>
          <div class="col">
            <img src="destreza.png" alt=""> 3
          </div>
          <div class="col">
            <img src="agilidade.png" alt=""> 2
          </div>
          <div class="col">
             <img src="inteligencia.png" alt=""> 8
          </div>
          <div class="col">
            <img src="resistencia.png" alt=""> 4
          </div>
          <div class="col">
            <img src="fe.png" alt=""> 2
          </div>
          <div class="col">
            <img src="carisma.png" alt=""> 4
          </div>
        </div>
      </div>

【问题讨论】：

欢迎来到 StackOverflow！我无法复制您的问题。将 font-size 属性添加到附加的 html 实际上会更改字体大小。尝试检查 Chrome devtools 中的数字——什么是设置字体大小（并覆盖您的设置）？
你的 CSS 应该在哪里改变 font-size ？可能你的选择器错了。
谢谢你们！我知道了。有一种风格覆盖了另一种风格。再次感谢

标签： html css bootstrap-4

【解决方案1】：

 <div class="container" style="float: left; font-family: 'Germania One', cursive;">
        <div class="row">
          <div class="col">
            <img src="forca.png" alt=""> 
            <p style="font-size:2em">2</p>
          </div>
          <div class="col">
            <img src="destreza.png" alt=""> 
            <p style="font-size:2em">3</p>
          </div>
          <div class="col">
            <img src="agilidade.png" alt=""> 
            <p style="font-size:2em">2</p>
          </div>
          <div class="col">
             <img src="inteligencia.png" alt=""> 
            <p style="font-size:2em">8</p>
          </div>
          <div class="col">
            <img src="resistencia.png" alt=""> 
            <p style="font-size:2em">4</p>
          </div>
          <div class="col">
            <img src="fe.png" alt=""> 
            <p style="font-size:2em">2</p>
          </div>
          <div class="col">
            <img src="carisma.png" alt=""> 
            <p style="font-size:2em">4</p>
          </div>
        </div>
      </div>

【讨论】：