在移动视图(折叠)中，导航栏-导航栏居中时出现的问题

使用下面的CSS代码，我已经成功地将导航栏中的导航内容居中在导航栏中

/* @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>

问题1:

现在，当你在你的电脑上看到这个导航栏的扩展整体时，它工作得很好-项目是中心的等等。然而，当你折叠工具箱和杂物时，3个图标栏按钮总是处于活动状态，并且无法隐藏导航栏中的项目。

第二题(与第一道并列):

更不用说，当你点击它时，它会在两种状态之间切换-一种会导致Link-3下拉菜单重叠Link 4，导致另一个滚动条在子链接之间导航(这种状态我不想要)-另一种状态会导致没有滚动条，而不是导致下拉菜单重叠导航条的底部(这是我想要的)。因此，我要做的就是让这两种状态是:1。一切都是隐藏的。当鼠标悬停在链接3上时，不会出现滚动条。

第三个问题:

同时，当你点击链接3时，链接3会被向上推，脱离链接1和链接2的对齐——我只是想让它的反应就像什么都没发生一样——你仍然只是在悬停。

去年的问题:

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

注意:所有这些问题都是因为@media (min-width:768px){}在CSS中被注释掉了。如果你建议取消注释掉的部分，这对我来说很好，但当你去到移动视图时，导航栏中项目的格式与那部分被注释掉时不一样。另外，您仍然拥有下拉菜单的滚动条。可能有一个更简单的方法来解决这一切，保留我注释掉的部分，而不是在CSS中添加一些东西，在导航栏折叠时对项目应用类似的格式，而不需要经历上述所有问题，但我似乎无法得到它。如果可以的话，非常感谢。

我知道这是一个很多问题，但解决你可以，并提前感谢!如果你需要我写一些额外的代码来更好地理解这里是怎么回事，请告诉我。

我用的是Bootstrap 3.2.0

你可以像我一样，向下钻取到你想要隐藏的结构。也许当它被隐藏时，页面上的代码发生了变化，以至于需要新的代码结构来隐藏它?

我在我的网站上有一个例子是:

div h3 span.HeaderImg img {
    visibility:hidden
}

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

编辑:

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

.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
}

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

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

它正在创建滚动条/悬停交易。实际上，正如评论中所讨论的那样，在手机设计中执行这一功能可能不是一个好主意，因为在触屏设备上无法实现悬停。

换句话说

相关内容

最新更新

热门标签：