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

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>

第一个问题：

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

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

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

第3个问题：

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

最后一个问题

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

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

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

我正在使用Bootstrap 3.2.0。

Answer 1

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

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

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

换一种说法

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

DEMO

Answer 2

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

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

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
}