在小屏幕上引導jumbotron寬度問題

我有一個問題，我的jumbotron包含一些文本和一個按鈕。基本上在一個小屏幕上（320），其中包含的文本不會以中間顯示爲中心，白色側邊欄出現在右側，我無法弄清楚來自哪裏。您可以在240和320的屏幕看到它在這裏：http://mattkersley.com/responsive/該網站是http://test.assatena.it/在小屏幕上引導jumbotron寬度問題

HTML

<div class="jumbotron vertical-center container-fluid center-block"> 
    <div class="container center-block"> 
     <h1 class="center-block">Associazione Culturale e Musicale Atena</h1> 
     <div class="text-center center-block"><a data-toggle="modal" href="#modal-iscrizione" class="page-scroll btn btn-success btn-xl">iscriviti qui!</a></div> 
    </div> 
</div>

CSS

.jumbotron{ 
    position: relative; 
    background-image: url(http://www.assatena.it/wp-content/uploads/2014/06/sfondo1.png); 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    margin: 0 auto; 
    overflow: hidden; 
}

謝謝

來源

2017-03-03 Ska Frenz

你可以提供一個小提琴或摘錄？ – Swellar

你得到的額外空間不是因爲你的Jumbotron，而是因爲沒有「最大寬度：100％」的img元素。談論你的「新聞」部分。還可以降低小屏幕的字體大小。這將解決您關於文本居中的問題。 – divy3993

嘗試使用媒體查詢更改該屏幕寬度的字體大小。 – 2017-03-03 06:18:04

img{max-width:100%;} 
.jumbotron h1 {word-wrap: break-word;}

來源

2017-03-03 06:25:51 Heta

只需添加此CSS然後你不能看到滾動更小，然後320px – Heta

在小屏幕上引導jumbotron寬度問題

回答

相關問題