부트 스트랩 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

미디어 쿼리를 사용하여 해당 화면 너비의 글꼴 크기를 변경하십시오. –

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

출처

2017-03-03 06:25:51 Heta

그냥이 css를 추가 한 후 u 캔트가 작고 320px에서 스크롤을보십시오 – Heta

부트 스트랩 jumbotron 너비가 작은 화면에서 발생합니다.

답변

관련 문제