纵向和横向的引导列视图

Posted 2023-03-06

【中文标题】纵向和横向的引导列视图

【英文标题】：Bootstrap column view in portrait and landscape

【发布时间】：2014-04-13 22:21:25

【问题描述】：

我是 bootsrap 的新手，想问一下，无论如何，当设备屏幕处于纵向时始终使用“md”大小列，而处于横向时始终使用“xs”列？

【问题讨论】：

非常感谢，这太棒了：D

其实我的 JS 想法不太好，会和 CSS 媒体查询冲突。相反，我建议您扩展 CSS 以使用媒体查询。使用语法@media screen and (orientation:portrait) etcetera。

如果您使用的是最新版本，请查看 bootstrap.css 周围的第 1389 行并转发您将看到网格系统，然后使用您自己的 CSS 扩展它，github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

谢谢，这对我帮助很大...我只是通过媒体查询更改列的宽度。

【参考方案1】：

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

【参考方案2】：

使用新的或更改的媒体查询扩展 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 本身没有内置方向开关。

【参考方案3】：

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

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

两种解决方案：

1- 是将“portrait”类添加到您希望以 width=100% 纵向显示的任何 div。

2- 取消注释并在媒体上使用第二条规则，该规则将 width:100% 应用于类名以 width col-xs 开头的任何 div