僅在手機上更改盒子的位置？

我想知道是否有可能改變搜索框，但只有在手機上的位置。我試圖把id="search"在包含input與盒：僅在手機上更改盒子的位置？

@media only screen and (max-width: 767px) { 


    #search 
    { 
     position:absolute; 
     top: 0; 
     width:90%; 
     background: none repeat scroll 0 0 #ffffff; 
    } 


}

但似乎並不工作。我希望搜索框位於標題的底部，但僅限於手機。這可能嗎？

來源

2015-08-28 cnexans

這是因爲你的'col-md-12'的網格框架具有相對定位。因此，您的搜索表單將始終相對於其相對父容器而言是絕對位置。 –

感謝您的回覆。我可以試試位置：固定？或者有什麼辦法可以做到這一點？ – cnexans

'position：fixed;'should work。你將面臨的問題是如果你滾動，除非你也修復你的標題。 –

-1

添加其他搜索框的中心塊
隱藏這個桌面上，並顯示在

更新：修正了將工作位置，但不會允許使用其他的元素

的代碼是這樣的

#search1 { 
 
    display: block; 
 
} 
 
#search2 { 
 
    display: none; 
 
} 
 
@media only [....] { 
 
    #search1 { 
 
    display: none; 
 
    } 
 
    #search2 { 
 
    display: block; 
 
    } 
 
}

來源

2015-08-28 04:55:33

你需要改進你的答案。你已經提供了說明，但最好還是用一些代碼解釋它。 – callmekatootie

像@media這樣的東西只有[....] {＃search1 {display：none; }＃search2 {display：block; }}？謝謝！ – cnexans

在工作中我們使用JavaScript & jQuery來在不同屏幕尺寸移動元素，像這樣：

function moveMenu(){ 
    if($(window).width() < 767){ 
     // If the screen is less than 767, move the menu to mobile position 
     $('#menu-header').prependTo('#mobile-menu-wrapper'); 
    } 
    else { 
     // Otherwise, put it in the normal location 
     $('#menu-header').prependTo('#header-menu-wrapper'); 
    } 
}

它的重要，如果有人加載一個小屏幕上的頁面，那麼它會調整到大，這個函數運行。因此，我們還添加這兩個位來觸發它的頁面加載和頁面大小調整：

$(window).resize(function(){ 
    moveMenu(); 
}); 

$(window).load(function(){ 
    moveMenu(); 
});

此方法意味着您不必重複菜單「迴流」的頁面。

來源

2015-08-28 13:12:37 Djave

僅在手機上更改盒子的位置？

回答

相關問題