仅在 iPad 纵向上居中引导导航栏项目？

Posted 2023-03-12

【中文标题】仅在 iPad 纵向上居中引导导航栏项目？

【英文标题】：Centering Bootstrap navbar items only on iPad portrait orientation?

【发布时间】：2014-11-06 10:02:39

【问题描述】：

有可能吗？

我一直在尝试使用以下媒体查询将导航栏项目居中：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
  .navbar .navbar-nav .navbar-right>li 
      display: inline-block;
      float: none;
      vertical-align: top;


   .navbar .navbar-collapse 
       text-align: center;
  

我也试过了

margin: 0 auto;

【问题讨论】：

修改你的代码 :)

@BojanPetkovski jsfiddle.net/sLhxq16p

【参考方案1】：

你是http://jsfiddle.net/sLhxq16p/3/

@media handheld, only screen and (min-width: 768px), only screen and (min-device-width: 768px), only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) and (orientation: portrait) 
    .nav li 
        text-align: center;
    

仅限 iPad 纵向（iPad 3 和 4）

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) 
   .nav li 
        text-align: center;
    

仅限 iPad 纵向（iPad 1 和 2）

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) 
    .nav li 
        text-align: center;
    

【讨论】：

谢谢@Bojan，但据我所知，它只是将导航 置于折叠状态的中心？我的目标是将导航栏列表项以“正常”非折叠状态居中，但仅在 iPad 上以纵向显示，如果我不清楚，请见谅。

是的！非常感谢@Bojan！