如何在 Flask 中使 bootstrap 旋转木马标题响应

Question

我将 bootstrap 旋转木马标题一直移动到左端，顶部和底部为零。但现在当我减小屏幕尺寸时，我的字幕失去了响应行为。当我缩小屏幕时，标题从轮播滑块中消失，只剩下图像。如何使标题具有响应性？

HTML代码如下


<div class="container blog">
    <!-- Carosal slider -->
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="/blog-page/{{ first.id }}" class="blog-link">
                    <img class="d-block w-100" src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" alt="First slide" height="500px">
                    <div class="carousel-caption d-none d-md-block">
                        <div class="caption">
                            <h1>{{ first.title }}</h1>
                            <hr>
                            <p>{{ first.content[0:100] | safe }}...</p>
                        </div>
                    </div>
                </a>
            </div>
            {% for blog in recent %}
                <div class="carousel-item">
                    <a href="/blog-page/{{ blog.id }}" class="blog-link"> 
                        <img class="d-block w-100" src="{{ url_for('static', filename = 'uploads/blog/' + blog['cover_img'])}}" alt="First slide" height="500px">
                        <div class="carousel-caption d-none d-md-block">
                            <div class="caption">
                                <h1>{{ blog.title }}</h1>
                                <hr>
                                <p>{{ blog.content[0:100] | safe }}...</p>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

这是 CSS 文件

 .carousel-caption {
        background-color: white;
        opacity: 0.9;
        right: 0;
        text-align: right;
        height: 100%;
        max-height: 100%;
        max-width: 30%;
        left: auto;
        color: black;
        padding: 2rem;
        bottom: 0;
    }

Answer 1

问题出在这一行 .d-none <div class="carousel-caption d-none d-md-block">

由于这个 class d-md-block，这会在除中型 1 以外的所有设备上隐藏它。因此，只需删除 class ans 就可以了。

参考表格Bootstrap官方网站 Hiding elements

如何在 Flask 中使 bootstrap 旋转木马标题响应

How to make the bootstrap carousel caption responsive in Flask

html

css

flask

responsive-design

bootstrap-4