Twitter bootstrap 在引导中正确设置字体大小的样式

我正在努力调整标题的字体大小

当调整浏览器窗口的大小时，相同的

h2

标题突然与我的

h1

标题一样大，这似乎会产生连锁反应，就像我的Jumbotron中嵌套的

div

被压扁一样

我如何解决这个问题（这样我的

h1

仍然是最大的字体，并且绿色的promobox

div

不会在浏览器调整大小时被压扁？）

实例：

HTML代码：

<div class="special">
    <div class="jumbotron">
        <div class="container text-center">
            <div class="h1extrapadding hidden-xs hidden-sm"></div>  
            <h1 class="boldme">
                Aged 20-30 & frustrated with money?
            </h1> 
            <div class="greenpromobox">
                <div class="h2extrapadding hidden-xs hidden-sm"></div>
                <h2 class="boldme">
                    Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> quickly gain control over your finances
                </h2>


                <!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                    <form action="//moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&amp;id=299de51b4e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                        <div id="mc_embed_signup_scroll">
                            <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/hand-drawn-arrow.png" id="handarrow" class="hidden-xs hidden-sm" alt="arrow"><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address" required autofocus>
                            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                            <div style="position: absolute; left: -5000px;" aria-hidden="true">
                                <input type="text" name="b_9ccf2d2219536b32eaae3c3d1_299de51b4e" tabindex="-1" value="">
                            </div>
                            <div class="clear">
                                <input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg">
                            </div>
                        </div>
                    </form>
                </div>

                <!--End mc_embed_signup-->

            </div>
        </div>
    </div>
</div>

20-30岁，对金钱感到沮丧？
参加我们的免费跳跃启动您的财务课程，快速掌控您的财务状况

---

Sam

尝试使用媒体查询，并在每个查询中设置您选择的字体大小

/*超小型设备（手机，最高480px）*/
@媒体屏幕和屏幕（最大宽度：767px）{
h1{
字号：1em；
}
}
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）和（最大宽度：991px）{
h1{
字号：2em；
}
}
/*平板电脑/台式机及更高版本--------*/
@介质（最小宽度：992px）和（最大宽度：1199px）{
h1{
字号：3em；
}
}
/*大型台式机及以上-----------*/
@媒体屏幕和屏幕（最小宽度：1200px）{
}

---

Hello

Open debuger找到一个你想要设置样式的元素，你会看到在它上面应用了什么规则。谢谢，我尝试过使用%但是似乎没有什么帮助，我想greendivbox可能把事情搞砸了！bootstrap会根据屏幕大小更改标题的样式。尝试使用一个span，并为其指定一个类名，该类名包含与要使用的标题相同的css属性，就像在H2周围使用span并应用字体大小%？我发现问题是一个单独的“特殊”类，请参阅：