Bootstrap 6 - 4 - 2 - 1列

时间:2016-04-23 21:58:59

标签: twitter-bootstrap-3 responsive-design

我使用bootstrap在一个非常简单的网站上进行响应式设计http://www.auto-moto-klub.cz/我花了几个小时试图根据屏幕尺寸实现这种行为(像素范围只是示例,不一定是这些) :

<= 300px .. 1 column
>= 301px & <= 600px .. 2 columns
>= 601px & <= 1024 .. 4 columns
>= 1024px .. 6 columns

目前它可以使用class =“col-sm-2”,如下所示:

<= 767px .. 1 column .. TOO BIG around 300-767px, LOOKS CRAZY 
>= 768px .. 6 colums .. TOO SMALL around 768-1024px

我尝试了class =“col-xs-1 col-sm-2 col-md-4 col-lg-6”..我认为这意味着在超小屏幕尺寸上它会有1列,在小2上,在中等4和大6上。但是我可能根本不理解它,因为它做了奇怪的事情:

>= 1200px .. 2 columns
<= 1199px & >= 992px .. 3 columns
<= 991px & >= 768px .. 6 columns
<= 767px .. 6 columns somehow broken placed on the left

请帮忙。提前感谢您的任何建议。

1 个答案:

答案 0 :(得分:0)

尝试以下方法:class =&#34; col-lg-2 col-md-3 col-sm-6 col-xs-12&#34;。它应该解决这个问题。