html – Bootstrap隐藏为肖像,但显示为景观

概述假设我有一个带有3个li元素的ul.如何在纵向模式下隐藏最后两个li元素,并在横向模式下显示全部3个元素？使用CSS offcourse和Bootstrap 3. <div class="header-box pull-left"> <ul> <li class="usp"> <a href="link" title="usp"> <span class="usp 假设我有一个带有3个li元素的ul.如何在纵向模式下隐藏最后两个li元素,并在横向模式下显示全部3个元素？使用CSS offcourse和bootstrap 3.

<div >  <ul>   <li >     <a href="link" title="usp">       <span >usp</span>     </a>   </li>   <li >     <a href="link" title="usp">       <span >usp</span>     </a>   </li>   <li >     <a href="link" title="usp">       <span >usp</span>     </a>   </li>  </ul></div>

我想过做的事情：

.show-for-landscape{display:block!important;}

但这如何与媒体查询一起使用？什么是屏幕尺寸的好设置等？

任何建议更受欢迎

解决方法 对于面向设备方向的媒体查询,您可能会更幸运,例如：

@media screen and (max-device-wIDth: 1000px) and (orIEntation:landscape){   /*...your special rules for landscape...*/ }

我不确定移动浏览器对orIEntation属性的整体支持,但我知道它适用于我当前的所有iOS和我的AndroID galaxy Note和S4原生浏览器.我确实知道的是,这只会针对移动设备 – 桌面浏览器会完全忽略它 – 因此,设置为1000px的max-device-wIDth属性将安全地仅影响移动设备,并且在桌面上查看时不会产生任何影响.

我也成功地在Web应用程序中使用了它(不是bootstrap).你必须测试：

@media screen and (min-aspect-ratio: 13/9){ } // landscape and @media screen and (max-aspect-ratio: 13/9){ } // portrait.

总结

以上是内存溢出为你收集整理的html – Bootstrap隐藏为肖像,但显示为景观全部内容，希望文章能够帮你解决html – Bootstrap隐藏为肖像,但显示为景观所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。