更改窗口大小时div的位置

Question

当屏幕大小小于481px时，我试图更改div位置，我在滑块后面的导航几乎在页面的中间，但在移动视图中，它需要在滑块上方，这就是我试图做的

<style type="text/css">
    .navPosition{position: relative;top: 0 !important;margin-bottom: 100px;}
 </style>
    <script src="js/bootstrap.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $width=$(window).width();
                if($width<481){
                        $("#navbg").addClass("navPosition");
                }
            });
        </script>

这是我的导航代码

<nav class="navbar" role="navigation" id="navbg">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->

切换导航

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav home-nav">
                <li>  <a href="#">Home</a></li>
                <li>  <a href="#">About us</a></li>
                <li>  <a href="#">Academics</a></li>
                <li>  <a href="#">News & Events</a></li>
                <li>  <a href="#">Contact us</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

但这对我不起作用，我如何正确地完成它？请帮助

Answer 1

尝试媒体查询来完成

div#demo {
    position: relative;
    margin-top:10px;
}
@media only screen and (max-width: 481px) {
    div#demo{
        margin-top:200px;
    }
}

在html端创建id为的div

<div id='demo'> This is the demo for media query</div>

我正在为您创建一个小jsfiddle