Question

我正在使用完整滑块主题here。出于某种原因，我使用的文本不是基于设备重新调整大小。当我在手机上查看它时，三个字母占据了整个屏幕。我正在使用H1和H2（参见下面的代码段）。它在普通屏幕上看起来很好。我已经做了很多搜索，似乎我应该使用'class =“container-fluid”'和/或'class =“row-fluid”'？当我尝试这个时，幻灯片变成空白。我想知道我是否需要在完整的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;
    }
}

Bootstrap滑块标题调整大小

1 个答案: