我是响应式设计的新手,我现在正在使用twitter bootstrap responsive.css.我的项目遇到了一些麻烦.
麻烦的是,我的左栏不会崩溃(如果这是正确的术语),或者不会叠加.我想要的是,左列应移动到span8列下方并调整其宽度.它现在做的是,左列的宽度减小并挤压其内部的所有内容.我的目标是768x1024媒体屏幕的移动屏幕尺寸.
布局的基本标记是,左边是span8,右边是span4.span4是我的其他块.
<div class="row">
<div class="span8">
some block with contents
</div>
<div classs="span4">
<div class="sideBlock"><!--fluid width was set-->
<img src="http://placehold.it/298x77">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我的主要问题是,我们如何使用媒体查询(使用twitter bootstrap)来定位特定的屏幕大小.然后定制它以满足我们的需求?