Question

我对bootsrap感到失败并想问，无论如何，当设备屏幕在Portrait中时总是使用“md”大小的列，并且当它在横向中总是使用“xs”列时？

Answer 1

使用新的或更改的媒体查询扩展Bootstrap CSS。通常，保留原始bootstrap.css文件并使用更改进行扩展是最好的方法，否则将来的升级将很麻烦。您可能只想重新创建要使用的网格类，例如：

@media (min-width: 992px) and (orientation:landscape) {
    .col-md-4 {
        // some properties
    }
}

@media (min-width: 992px) and (orientation:portrait) {
    .col-md-4 {
         // redefined
    }
}

正如Skelly所说，目前Bootstrap本身没有内置定向开关。

Answer 2

据我所知，没有办法“开箱即用”.Bootstrap使用基于屏幕宽度而不是方向的媒体查询。

Answer 3

这是我的实际解决方案，也许可以帮助某人

@media (orientation: portrait){
   .portrait{
       width: 100%;
   }
   /*div[class^='col-xs'], div[class*='col-xs']{
       width: 100%;
   }*/
}

两种解决方案：

1-是添加＆＃34;肖像＆＃34;您希望以宽幅= 100％的纵向显示的任何div的类。

2-取消注释并在应用宽度的媒体上使用第二条规则：100％到任何具有类名称以宽度col-xs开头的div

在纵向和风景的Bootstrap专栏视图

3 个答案: