Bootstrap Carousel Caption上升

Question

在我改变浏览器窗口大小之前看起来一切正常：轮播标题上升并被右侧控件覆盖。我希望标题保持不变，只需更改文字大小。

还有另一个问题：更改浏览器窗口大小时轮播控件会变大。

＆＃13;

＆＃13;

   .carousel-caption{
        position: absolute;
        left: 200px;
        width: 500px;
        margin-left: 30%;
        margin-bottom: 8%;
        padding-right: 40px;
        max-height: 100%;


    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    }

    .p1 {
    margin: auto;
        font-size: 22px;
        font-family: ClearSans-Light;
        color: white;
        text-align: left;
        text-shadow: 1px 1px 2px black, 0 0 1em transparent;
    }

        .p2 {
        font-size: 22px;
        color: white;
        text-align: right;
        }

        .position {
        font-family: ClearSans-Bold;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                <div class="carousel-caption my-carousel-caption">
                    <p class="p1">
                        Snail is a common name that is applied most often to land snails, terrestrial pulmonate gastropod molluscs. However, the common name "snail" is also applied to ..
                    </p>
                </div>
            </div>
   

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="carousel-arrow glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="carousel-arrow glyphicon glyphicon-chevron-right"></span>
        </a>
    </header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

需要在font-size: 3vmin;和.p1而不是.p2

中添加font-size: 22px;