Question

使用以下CSS代码，我设法将navbar-nav内容集中在我的导航栏中的导航栏中

/* @media (min-width:768px) {  */ Note this comment

.navbar > .container {
    text-align: center;
}
.navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
    float: none;
    display: inline-block;
}
.collapse.navbar-collapse {
    float: none;
    display: inline-block!important;
    width: auto;
    clear: none;
}
/* } */ Note this comment

这是HTML：

<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link1</a>
                </li>
                <li><a href="#">Link2</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Link3 (Dropdown)</span><b class = "caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Sublink 1</a>
                        </li>
                        <li><a href="#">Sublink 2</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Link 4</a>
                </li>
            </ul>
        </div>
    </div>
</div>

第一个问题：

现在，当您在计算机上以扩展的整体查看此导航栏时，它可以正常工作 - 项目是居中的等等。但是，当您折叠工具包和caboodle时，3图标栏按钮始终处于活动状态，并且无法将项目隐藏在导航栏中。

第二个问题（与第一个问题相关）：

更不用说，当你点击它时，它会在两个状态之间切换 - 一个导致Link-3下拉菜单与Link 4重叠，导致另一个滚动条在子链接之间导航（这种状态我不想要） - 而另一个状态导致没有滚动条，而是导致下拉菜单重叠导航栏的底部（这是我想要的）。因此，我正在尝试做的是使两个状态：1。一切都被隐藏，2。悬停时链接3不会产生滚动条。

第3个问题：

此外，当你点击链接3时，链接3被推高，超出了与链接1和2的对齐 - 我只是想让它回应，好像什么也没发生 - 你仍然只是在盘旋。 / p>

最后一个问题：

这必须严格执行，因为上面的CSS代码中已注释掉了部分，但是由于此代码，页脚导航栏中的内容（您看不到）也是居中的。对于这个问题，我只想要一个解释，因为再一次，@ media（min-width：768px）的东西可以做到。

注意：由于@media（min-width：768px）{}在CSS中被注释掉，所有这些问题都出现了。如果您建议取消注释已注释掉的部分，我可以这样做，但是当您转到移动视图时，导航栏中项目的格式与该部分被注释掉时的格式不同。另外，您还有下拉列表的滚动条。可能有一种更简单的方法来修复这一切，方法是保留在我注释掉的部分中，而不是在CSS中添加一些东西，当导航栏折叠时应用类似的格式化而没有经历所有上述问题，但我不能似乎得到了它。如果可以的话，非常感谢。

我知道这有很多问题，但要解决你的问题，并提前感谢！如果你需要一些额外的代码来更好地理解wtf是在这里，只需知道。

我正在使用Bootstrap 3.2.0。

Answer 1

你可以像我一样做，并深入到你想隐藏的结构。也许当它被隐藏时，页面上的代码会发生变化，以至于隐藏了新的代码结构来隐藏它？

我在网站上的一个例子是：

div h3 span.HeaderImg img {
    visibility:hidden
}

不确定这是否有帮助，但它是我想到的。我的所有其他图像都有默认的填充和结构，但不是通过代码并尝试删除该单个图像，我只是能够隐藏它。

修改也许可以尝试使用float:left给它一些结构。通过设置text-align:center，您仍可float:left width:100%。我的网站上有一些类似的代码也可以帮到你。如果有帮助，您可以自由使用或修改它：

.menulist li:hover li ul, .menulist li li:hover li ul { top:-999em } .menulist { float:left; width:100%; border-bottom:3px double #20C5B5 } .menulist ul { z-index:1000; margin:0; padding:0 } .menulist li { float:right; position:relative; list-style:none; margin:0; padding:0 } .menulist li a { display:block; margin-left:13px; padding-top:.333em; padding-bottom:.333em; font-size:large; color:#20C5B5 } .menulist li li { height:auto; margin:0; padding:0 } .menulist li li a { padding:0 16px } .menulist li ul { border:1px solid #000; position:absolute; width:13em; left:-999em; margin-left:-1px; padding:4px 0; color:#FFF } .menulist li:hover ul { top:3em; left:.333em } .menulist li li:hover ul, #menulist li li li:hover ul { left:190px; top:0 }

Answer 2

在您的设计中，您使用的是以下CSS：

.navbar-nav > li:hover > .dropdown-menu {
  display: block;
}

正在创建滚动条/悬停交易。实际上，正如评论中所讨论的那样，在移动设计中实现这一点可能不是一个好主意，因为悬停是使用仅触摸设备无法实现的。

换句话说

结论是只需取出此功能并继续轻松下拉。但是，您仍然有桌面设备的下拉菜单。下面是一个例子。

<强> DEMO

移动视图（折叠）时在navbar-nav中居中项目时出现的问题

2 个答案: