防止推特引导从重新定位水平元素垂直,直到一定的窗口宽度



我喜欢使用bootstrap来响应页面的一部分,对于页面的顶部,我到目前为止编写的代码工作得很好,它将导航元素并排放置在一个足够大的窗口中,当窗口的宽度变小时,它将元素重新定位在彼此的顶部(就像它被手机使用一样)。

然而,问题是垂直重新定位发生得太早,或者基本上,当窗口被做得更小,但不完全是手机的宽度大小,位置过早地垂直重新定位。

这是我目前为止写的:

 <html>
 <head>
         <meta charset="utf-8">
         <title>Walls</title>
         <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container">
 <br>

    <div class="row">
    <div class="span2">
         <p>Donec </p>
         <p><a class="btn" href="#">Click meeee &raquo;</a></p>
    </div>
    <div class="span2">
         <p>Donec  </p>
         <p><a class="btn" href="#">Click meeee &raquo;</a></p>
    </div>

    <div class="span8">
    </div>

    </div><!-- .row -->
 </div><!-- .container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 </body>
</html>

是否有办法让它们有一个固定的位置,直到窗口达到一定的大小,然后它们重新垂直堆叠?这才是我真正的目标

是的。媒体查询(https://developer.mozilla.org/en/docs/CSS/Media_queries) (http://css-tricks.com/css-media-queries/)正是您要找的!它可以让你根据屏幕大小设置不同的规则,你可以设置特定的宽度,直到一个点,在这个点以下,你可以应用你当前的CSS规则。

最新更新