排版「顯示」沒有響應

新功能「顯示」沒有響應，因爲我想。在小型設備上的文字在圖片，截圖：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>

來源

2017-09-18 Tomasz Chwicewski

Bootstrap不會爲你做這件事，你仍然需要爲響應排版編寫媒體查詢。 https://v4-alpha.getbootstrap.com/content/typography/#responsive-typography 請注意，文檔中的示例是用sass編寫的。 –

<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>與引導對準類取代。

然後移動，您可以使用媒體查詢，使文字更小：

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

希望這有助於。

來源

2017-09-18 11:35:50

非常感謝:)！ –

排版「顯示」沒有響應

回答

相關問題