我正在使用一个流动的Twitter Bootstrap布局来设计我的设计,并且让他做出回应.考虑一个这样的网格:
<div class="row-fluid"> <div class="span4"></div> <div class="span8"></div> </div>
什么是隐藏span4的最佳方法,让span8占据整个宽度,当屏幕变小时使用?
解决方法
使用任何最小/最大宽度设置的媒体查询.span4显示:none;
然后,将.span8添加到.span12的规则中,对于您隐藏的任何宽度的所有内容.span4,因为所有这些工作已经通过引导完成,所以不需要重复.它看起来像这样:
@media (min-width: 320px){ .span12,.span8 { width: 300px; } }
(最后一点的代码只是一个例子,但是在bootstraps脚手架中会有类似的东西.)
希望有帮助:)
编辑:
这可以工作,我使用开发工具在引导站点测试它,它似乎工作.再次,在媒体查询中:
@media (min-width: 320px){ #special .span4 { display: none; } #special .span8 { float: none; width: auto; } }