如何创建折叠3列布局宽度引导2.3

Question

我的目标是具有固定列宽（适用于平板电脑和桌面）的响应式布局，以实现桌面3列，平板2列和手机1列。 不幸的是，“768”容器的宽度是通过使用网格和宽度宽度来计算的。

有什么办法可以说“嘿，768容器应该只有700px”而不需要改变响应* .less文件吗？实现这一点没有变化较少是使用一个@media查询

Answer 1

一种方式..

例如，如果你使用.span4跨越拿到3列，你可以使用CSS来覆盖的引导的宽度在.span4在平板电脑上：

@media (min-width: 768px) and (max-width: 979px) { 
    .row .span4 {width:46%;} 
} 

演示与@media查询：http://www.bootply.com/64864

另一种方法是使用UTI响应礼拜课。这种方法涉及更多的HTML标记，但布局更容易。例如，此处有3台span4显示在桌面上，2个span6显示为平板电脑。对于电话span6切换到100％以显示1列。

<div class="container"> 
    <div class="row visible-desktop hidden-tablet hidden-phone"> 
     <div class="span4">..</div> 
     <div class="span4">..</div> 
     <div class="span4">..</div> 
    </div> 
    <div class="row hidden-desktop visible-tablet"> 
     <div class="span6">..</div> 
     <div class="span6">..</div> 
    </div> 
</div> 

演示用工具类：http://www.bootply.com/64868