仅在手机上更改盒子的位置？

我想知道是否有可能改变搜索框，但只有在手机上的位置。我试图把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

仅在手机上更改盒子的位置？

回答

相关问题