排版 "display" 没有响应

Question

新功能 "display" 没有我想要的响应。在小型设备上，文本位于图像下方，屏幕截图：https://imgur.com/a/AewLY 代码：

<!-- IMAGE -->
    <div class="d-none d-md-block">
        <img src="<?php echo base_url('assets/images/bg-img.jpg'); ?>" class="img-fluid">
        <div class="caption hidden-sm-down">
            <center><h1 class="display-3">ZespÃ³Å‚ SzkÃ³Å‚ Elektrycznych</h1></center>
            <center><h1 class="display-4">im. prof. Janusza Groszkowskiego</h1></center>
        </div>
    </div>

Answer 1

   <div class="d-none d-md-block">
        <img src="<?php echo base_url('assets/images/bg-img.jpg'); ?>" class="img-fluid">
        <div class="caption hidden-sm-down">
            <h1 class="display-3 text-center">ZespÃ³Å‚ SzkÃ³Å‚ Elektrycznych</h1>
            <h1 class="display-4 text-center">im. prof. Janusza Groszkowskiego</h1>
        </div>
    </div>

首先，从您的代码中删除 <center></center> 并替换为 Bootstrap 对齐 class.

然后对于移动设备，您可以使用媒体查询来缩小文本：

@media only screen and (max-width: 480px) {
    .display-3 {
       font-size: 14px; 
    }
}

如果您不熟悉媒体查询，可以在此处阅读有关它们的更多信息：https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

希望对您有所帮助。

排版 "display" 没有响应

Typography "display" not responsive

twitter-bootstrap

twitter-bootstrap-4