Question

我有一个包含一些文本的好的boostrap组件

 <div class="well well-sm" id="well_job">

                            <p>
                               <h5><%= "#{job.job_description}" %></h5>
                            </p>
                            <p>
                              <h6><%= "#{job.from_date} -" %></h6><h6><%= "#{job.to_date}" %></h6>
                            </p>
                    </div>

当我尝试通过其中一个类来选择它来更改字体系列时它不会改变（我尝试通过.well-sm选择它但是没有任何改变）：

    .well{
      font-family: 'Rock Salt', cursive;
}

如何选择井并将字体大小更改为内部文本？

Answer 1

首先，您的语法不正确，因为您无法在段落标记中放置标题标记。以下语法

<p>
  <h1>Some Header</h1>
</p>

将被浏览器解释为

<p></p>
   <h1>Some Header</h1>
</p>

您最终会遇到意外的</p>结束标记。验证您的html会导致此错误：

范围内没有 p 元素，但看到 p 结束标记。

回到您的问题，如果使用标题标记，您还需要指定定位该特定标题标记的样式。

.well {
  font-size: 14px;
}
.well h5 {
  font-size: 24px;
}

Answer 2

您是否已将字体导入标记<head>？

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

然后更改字体大小：

.well{
    font-family: 'Rock Salt', cursive;
}
.well p h5{
    font-size:30px;
}
.well p h6{
    font-size:20px;
}

无法更改boostrap“well”组件中的字体系列

2 个答案: