排版“显示”没有响应
排版“显示”没有响应
提问于 2017-09-18 11:07:05
新功能“显示”不是我想要的响应。在小型设备上，文本位于图像下，屏幕截图：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>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-18 11:35:50
<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/
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46277825
复制相关文章
相似问题
腾讯云开发者
