Question

新功能“显示”没有我想要的响应。在小型设备上，文字位于图片下方，屏幕截图为：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对齐类。

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

@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/

希望这有帮助。

排版“显示”没有响应

1 个答案: