twitter-bootstrap - Bootstrap slider 标题调整大小

Question

我正在使用可用的完整 slider 主题 here .出于某种原因，我使用的文本未根据设备调整大小。当我在手机上查看时，大约三个字母占据了整个屏幕。我正在使用 H1 和 H2(见下面的片段)。在普通屏幕上看起来不错。我做了很多搜索，似乎我应该使用“class="container-fluid"”和/或“class="row-fluid"'？当我尝试这个时，幻灯片变成空白。我想知道我是否需要在 full-slider.css 中定义新样式，或者我是否做错了什么，或者这是否是预期的行为？任何见解将不胜感激....

---

示例

---

<div id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
                <li data-target="#myCarousel" data-slide-to="5"></li>
                <li data-target="#myCarousel" data-slide-to="6"></li>
                <li data-target="#myCarousel" data-slide-to="7"></li>
            </ol>



            <!-- Wrapper for Slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <!-- Set the first background image using inline CSS below. -->
                    <div class="carousel-caption">
                        <h1 id="type">{{ scores.content.description }}</h1>
                        <h2 class="text-justify">{{ scores.content.general_description }}</h2></br>

                        <h2 style="text-align: center">Social Media.</h2>

                        <div style="text-align: center">
                            <a href="" target="_blank" class="btn btn-social-icon btn-linkedin">
                                <i class="fa fa-linkedin"></i> </a>

                            <a href="" target="_blank" class="btn btn-social-icon btn-twitter">
                                <i class="fa fa-twitter"></i> </a>
                        </div></br>
                        <div style="text-align: center">
                            <a href="" style="color:white" target="_blank">Link 1</a> |
                            <a href="" style="color:white" target="_blank">Link 2</a>
                        </div>
                    </div>
                </div>

Answer 1

它不会自行调整大小，因为它是 h1 和 h2。因此，使用自定义样式来操作它们。(使用媒体查询将是一个有用的解决方案。)

是这样的:-

@media (max-width:767px)
{
    .carousel-caption> h1
    {
        font-size: 16px;
    }
    .carousel-caption> h2
    {
        font-size: 14px;
    }
}