Question

我如何将导航栏<li>放在中心位置并仅在移动设备中100％使用它们？

目前我使用

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <nav class="navbar-collapse collapse">
        <ul id="myTab" class="nav navbar-nav pull-right">
            <li></li>
            ...
        </ul>
    </nav>
</header>

因为在桌面模式下我想在右侧导航。

当我切换到移动设备时，它看起来像这样：Picture with navbar

如何将其更改为以全局为中心的李？

谢谢。

修改：我稍后会发布我的解决方案。

Answer 1

您可以使用媒体查询执行此操作，当它在一定像素宽度下，更改其宽度。

@media (max-width:480px) {
    #myTab li { width:100%; float:none; }
}

编辑 - 还添加了float：none，因为它现在似乎正在浮动。

Answer 2

当菜单折叠为较小的宽度时，使用媒体查询覆盖.nav>li类...

@media (max-width: 768px) { 
  .nav>li {
    text-align: center;
  }
}

演示：http://www.bootply.com/nFls8QUKXJ

Answer 3

感谢您的回答。

我用以下几行代码解决了我的问题：

html-file：我刚刚删除pull-right中的<ul>：

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <nav class="navbar-collapse collapse">
        <ul id="myTab" class="nav navbar-nav">
            <li></li>
            ...
        </ul>
    </nav>
</header>

css-file：我为自己实施了pull-right并稍后重置：

#myTab 
{ 
    float:right;
}

@media (max-width:768px)
{
    #myTab 
    {
        float:none;
    }   
    #myTab li {
        width: 100%; 
    }
}

现在看起来像：

Link to result - 如您所见，我删除了text-align: center;部分，只是因为左对齐看起来更好。

Navbar选项卡仅适用于移动设备的全尺寸和中心

3 个答案: