如何在引导程序中增加字体大小

Question

我需要增加以下电话号码的字体大小。

<div class="topbar">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.30AM - 5.00PM. Sunday CLOSED</span></p>
                <p class="pull-right"><i class="fa fa-phone"></i>Tel No. (+77) 853 740 966</p>
            </div>
        </div>
    </div>
</div>

Answer 1

将其包装成跨度并添加CSS：

.text-large {
  font-size: 150%;
}

<div class="topbar">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.30AM - 5.00PM. Sunday CLOSED</span></p>
        <p class="pull-right text-large"><i class="fa fa-phone"></i><span>Tel No. (+77) 853 740 966</span></p>
      </div>
    </div>
  </div>
</div>

Answer 2

更新：<big>应该在 HTML5 中被弃用，所以 CSS 是唯一的方法。无论当前字体大小如何，使用相对大小效果最好。

.font-size-lg { font-size: 1.2rem; }

我还没有找到使用 Bootstrap 的简单方法，所以我使用<big>.

<p class="pull-right">
  <big><i class="fa fa-phone"></i>Tel No. (+77) 853 740 966</big>
</p>

我希望有一个 Bootstrap 类，所以我不必在 HAML 中使用额外的行。

%p
  %big This is bigger.