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

将其包裹在span中并向其添加css：

＆＃13;

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

＆＃13;

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

＆＃13;

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.

Answer 3

<span style="font-size:30px">Tel No. (+77) 853 740 966</span>

或

.large-fontsize{
font-size: 30px !important;
}  

<span class="large-fontsize">Tel No. (+77) 853 740 966</span>

Answer 4

如果您使用类似的SCSS来生成CSS，则可以添加自己的全局类，该类会略微增加（+ 25％）字体大小。

在Bootstrap捆绑包中找到的_variables.scss中，已经定义了一个变量$ font-size-lg。用它来以自己的style.scss（或类似样式）在项目中定义一个类。

.font-size-lg {
  font-size: $font-size-lg;
}

在HTML中使用

<span class="font-size-lg">Text to enlarge</span>

Answer 5

您始终可以跳过引导程序并在源代码内联中编辑字体大小：

style="font-size:x-large;"

如何在bootstrap中增加字体大小

5 个答案: