當它被調整到一個小窗口時，頁面沒有響應

我使用Bootstrap使頁面響應。如果窗口很大，就像第一張圖片中顯示的那樣很好。）歡迎消息和三個塊定位良好。當它被調整到一個小窗口時，頁面沒有響應

當我使窗口變小時，歡迎消息中的文本位於塊的下方。然後最後一個塊的位置向下移動，如第二個圖像所示。。

顯示歡迎消息和塊的CSS。

.blocks { 
    display: block; 
    margin: 0 auto; 
    width: 75%; 
    height: 300px; 
} 

.box1, .box2, .box3 { 
    width: 33.333%; 
    height: 250px; 
    vertical-align: top; 
    display: inline-block; 
    zoom: 1; 
    /* padding: 25px; */ 
} 

.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 


.welcome{ 
text-align: center; 
color: #00ff00; 
height: 150px; 
width: 50%; 
margin: auto; 

}

我的HTML是

<div class = "container-fluid carousel_pos" style="overflow-y: auto"> 
    <div class="row"> 
    <div id="awesome-carousel" class="carousel slide" data-ride="carousel"> 


    </div> 
    </div> 
    <div class="row welcome"> 
    <h1>Welcome to ######Tourism</h1> 
    <p>Wwer eree ere ae llji er we lkjj ewer jlkjkj erw jkljer lkjkje werewer wkerkjkl. We reakl lkjle aere ar akljiu are jearear lkljkjare. Jk are lkjklul kljrea elkjare lj. He ioierwer sdfsdf sdfeiuit kare adfkjkjl. Wer kjljser sejrlj ekrjkjsfiu ekrjlkejk.</p> 
    </div> 

    <div class="blocks"> 
     <div class="col-sm-4 box1" style="background-color:lavender;">.col-sm-4</div> 
     <div class="col-sm-4 box2" style="background-color:lavenderblush;">.col-sm-4</div> 
     <div class="col-sm-4 box3" style="background-color:lavender;">.col-sm-4</div> 
    </div> 
</div>

編輯：

來源

2016-02-29 batuman

註銷從WordPress的然後訪問site.Take一看就是一遍還是沒有發生？同時給你的CSS圖像高度％。 –

@ChoncholMahmud，是的，它發生了。移動設備上也發生了同樣的事情。 – batuman

在你發佈的代碼中沒有問題：https：//jsfiddle.net/o4dmrk4m/ – silviagreen

要設置一個固定的height到.welcome所以當窗口較小的.welcome有150px一個height。擺脫height: 150px;在.welcome，它會工作。看代碼的工作原理https://jsfiddle.net/o4dmrk4m/1/

來源

2016-02-29 10:05:15 drosam

是的，它的工作原理。現在運作良好。 – batuman

另請參見@MarcoSantino答案，它將幫助您更好地使用引導 – drosam

你第一次必須在類「blocks」中加div類「row」。第二次，如果您使用引導，您可以從「box1」，「box2」和「box3」中刪除寬度，因爲您可以用「col-xs-4」替換「col-sm-4」。

這是例子：

HTML：

<div class="row blocks"> 
    <div class="col-xs-4 box1" style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-xs-4 box2" style="background-color:lavenderblush;">.col-sm-4</div> 
    <div class="col-xs-4 box3" style="background-color:lavender;">.col-sm-4</div> 
</div>

CSS：

.box1, .box2, .box3 { 
height: 250px; 
vertical-align: top; 
display: inline-block; 
zoom: 1; 
/* padding: 25px; */}

測試此解決方案。

再見！

來源

2016-02-29 10:06:15 MarcoSantino

https://jsfiddle.net/alaksandarjesus/o4dmrk4m/2/ –

JS小提琴鏈接，以支持MarcoSantino –

是的，謝謝你。你的解決方案使所有的塊都對齊好。 – batuman

您正在使用width: 33.333%;重新調整寬度使用此屬性或引導列。我寧願只使用引導類來確定行寬的大小。

我會用這樣的：

<div class="row col-sm-offset-1 col-sm-10"> 
    <div class="col-sm-4 " style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-sm-4 " style="background-color:lavenderblush;">.col-sm-4</div> 
    <div class="col-sm-4 " style="background-color:lavender;">.col-sm-4</div> 
</div>

來源

2016-02-29 10:09:14 ctumturk

當它被調整到一個小窗口時，頁面沒有響應

回答

相關問題