在小屏幕上更改滾動行爲

我希望在屏幕左側保留一個大圖像，並在右側列中包含垂直滾動的實際頁面文本，並保持左側圖像不變當在小屏幕（smatphones）中顯示時，圖片應位於文本頂部並滾動，因爲它將成爲文本的一部分。看來我只能得到兩個目標中的任何一個，有人可以幫助我嗎？在小屏幕上更改滾動行爲

我的代碼

<div class="row"> 
    <div class="col-md-8 col-xs-12"> 
    <img src="somebigpicture.jpg" class="img-responsive" width=100% > 
    </div> 
    <div class="col-md-4 col-xs-12"> 
    <div style="height: 100%; overflow-y: scroll; text-align:center"> 
     page text here...... 
    </div> 
    </div> 
</div>

這工作正常，但桌面上移動文本滾動頂部圖片後面。如果我離開「overflow-y：scroll」，它可以在移動設備上使用，但不能在桌面上使用。

來源

2016-12-29 Jacopas

您可以使用媒體查詢，媒體查詢僅適用於特定的條件，如特定的寬度。

例如以下溢出-Y規則將無法辦理屏幕寬度大於480像素：

@media screen and (max-width: 480px) { 
    body { 
    overflow-y: scroll; 
    } 
}

欲瞭解更多信息有關媒體查詢看到this w3schools page

來源

2016-12-29 19:32:13

的引導grid基於大約12的總寬度，並且您的xs寬度都使用12，這與如何描述應包含在.row中的內容相反：

行是列的水平組，確保列正確排列。

內容應該放在列中，只有列可能是行的直接子節點。

列類指示您希望在每行中使用12列的列數。所以如果你想要三個等寬的列，你可以使用.col-sm-4，。

來源

2016-12-29 19:51:06 Jmills

在小屏幕上更改滾動行爲

回答

相關問題