我喜欢使用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 »</a></p>
</div>
<div class="span2">
<p>Donec </p>
<p><a class="btn" href="#">Click meeee »</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规则。