左侧和右侧导航栏项目左侧的Bootstrap 3 Navbar Collapse菜单-Java 学习之路

我有一个带有左侧导航项和右侧导航项的Bootstrap 3导航栏（如下所示） .

Left and Right nav items

折叠时，我希望导航栏切换（AKA'汉堡菜单'）及其项目保持对齐 .

我的代码到目前为止：

<nav class="navbar navbar-default custom-navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

要在左侧进行导航栏切换的CSS是：

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
        margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

我添加了一个“拉右”样式来使项目对齐，但没有成功 .

“navbar-right”效果很糟糕 . 事实上，有了它，我会在同一行有两个右手项目 . 使用“pull-right”它们可以作为单行工作，但仍然保持在右侧 .

这让我：

左边的汉堡菜单（根据需要），
左侧的导航栏左侧项目（根据需要），
导航栏右侧项目仍然在右侧（我想要修复它！） .

最终结果：

The last two elements are still on the right

代码段是here .

2 回答

3

我对您的CSS和标记进行了一些调整，您可以查看here .

我要指出的一件事是 pull-right 和其他 pull 和 push 类用于重新排列网格列 .

回复于 2024-04-30T03:35:42+08:00
4
您可以使用 !important 规则覆盖pull-right的默认行为 .
```
@media (max-width:767px) {
 .nav.navbar-nav.pull-right {
   float: left !important;
 }
}
```
Output in <768px devices:

Bootply
回复于 2024-04-30T03:35:42+08:00

左侧和右侧导航栏项目左侧的Bootstrap 3 Navbar Collapse菜单

2 回答

相关问题