首页 文章

如何使用Twitter Bootstrap做这个简单的响应式布局?

提问于
浏览
0

请看看这个:

[除去]

当您调整浏览器大小时,它会从一行中的3个框直接变为每行1个 . 有没有办法让它在进入1之前每行2个?

如果我决定使用twitter引导响应网格,就像你有时使用其他CSS网格框架一样(例如限制为960px宽设计),我不确定我是否限制布局选项 .

1 回答

  • 2

    我喜欢Zaid 's cautionary note, though if you really need to do this, here'让你入门的东西:Live examplejsfiddle

    随着您的页面布局变得更加复杂,并且当您添加更多Bootstrap组件时,您必须使用雪球添加到自定义CSS的例外列表,因此可能很好地保持简单;)

    祝好运!

    CSS

    @media(min-width:481px) and (max-width:767px){
    
    .row-fluid [class*="span"]{   /* for the above viewpoints, force spans to be 50% */ 
    width:48.717948717948715%;
    
    float:left;
    }
    
    .row-fluid .span12{    /* override so span12 is full width */
    width:100%;
    margin-right:0 !important;
    }
    
    
    .row-fluid [class*="span"]:first-child {
    margin-left: 0;
     margin-right: 2.5109110747408616%;
    }
    
    .row-fluid [class*="span"]:last-child {
    float:right;
    }
    
    }
    

相关问题