html - 分离顶部导航栏和侧边导航栏-6ren

html - 分离顶部导航栏和侧边导航栏

转载作者：行者123 更新时间：2023-11-28 05:58:11

我有带有一些菜单的顶部导航栏和带有一些菜单的侧边导航栏。我为垂直导航栏提供了样式，但它反射(reflect)了所有导航栏并为我提供了图片中给出的输出 enter image description here

谁能建议我如何分离垂直菜单的样式。垂直菜单样式从@media 开始

.top-color {
  background-color: aquamarine;
  margin-bottom: 0;
}
.firstmenu {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .navbar-collapse {
    height: auto;
    border-top: 0;
    box-shadow: none;
    max-height: none;
    padding-left: 0;
    padding-right: 0;
  }
  .navbar-collapse.collapse {
    display: block !important;
    width: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-x: visible;
  }
  .navbar {
    max-width: 300px;
    margin-right: 0;
    margin-left: 0;
  }
  .navbar-nav,
  .navbar-nav > li,
  .navbar-left,
  .navbar-right,
  .navbar-header {
    float: none !important;
  }
  .navbar-right .dropdown-menu {
    left: 0;
    right: auto;
  }
  .navbar-collapse .navbar-nav.navbar-right:last-child {
    margin-right: 0;
  }
}

<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar top-color">
    <!--nav header Div-->
    <div class="container-fluid">
      <div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>My Page</h1></a>
      </div>


    </div>


  </nav>

  <nav class="navbar navbar-inverse firstmenu">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>

          </li>
          <li><a href="#">Page 2</a>
          </li>
          <li><a href="#">Page 3</a>
          </li>
        </ul>

      </div>
    </div>
  </nav>

</body>

</html>

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>
          </li>
          <li><a href="#">Another action</a>
          </li>
          <li><a href="#">Something else here</a>
          </li>
          <li><a href="#">Separated link</a>
          </li>
          <li><a href="#">One more separated link</a>
          </li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>
          </li>
          <li><a href="#">Another action</a>
          </li>
          <li><a href="#">Something else here</a>
          </li>
          <li><a href="#">Separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
</nav>

最佳答案

.top-color {
      background-color: aquamarine;
      margin-bottom: 0;
    }
    .firstmenu {
      margin-bottom: 0;
    }
.navbar-default .navbar-toggle {
  display: none ;
}
.navbar.navbar-default {
  float: left;
  width: 50%;
}
.navbar-default .collapse.navbar-collapse.navbar-ex1-collapse {
  display: block;
  float: left;
  width: 100%;
}
@media (min-width: 768px) {
      .navbar-collapse {
        height: auto;
        border-top: 0;
        box-shadow: none;
        max-height: none;
        padding-left: 0;
        padding-right: 0;
      }
      .navbar-collapse.collapse {
        display: block !important;
        width: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
      }
      .navbar-collapse.in {
        overflow-x: visible;
      }
      .navbar {
        max-width: 300px;
        margin-right: 0;
        margin-left: 0;
      }
      .navbar-nav,
      .navbar-nav > li,
      .navbar-left,
      .navbar-right,
      .navbar-header {
        float: none !important;
      }
      .navbar-right .dropdown-menu {
        left: 0;
        right: auto;
      }
      .navbar-collapse .navbar-nav.navbar-right:last-child {
        margin-right: 0;
      }
    }

<title>Bootstrap Case</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar top-color">
    <!--nav header Div-->
    <div class="container-fluid">
      <div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>My Page</h1></a>
      </div>


    </div>


  </nav>

  <nav class="navbar navbar-inverse firstmenu">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>

          </li>
          <li><a href="#">Page 2</a>
          </li>
          <li><a href="#">Page 3</a>
          </li>
        </ul>

      </div>
    </div>
  </nav>

</body>

</html>

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>
          </li>
          <li><a href="#">Another action</a>
          </li>
          <li><a href="#">Something else here</a>
          </li>
          <li><a href="#">Separated link</a>
          </li>
          <li><a href="#">One more separated link</a>
          </li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
  

    <li><a href="#">Link</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>
          </li>
          <li><a href="#">Another action</a>
          </li>
          <li><a href="#">Something else here</a>
          </li>
          <li><a href="#">Separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
</nav>

你可以试试这个 css:

.navbar-default .navbar-toggle {
  display: none ;
}
.navbar.navbar-default {
  float: left;
  width: 50%;
}
.navbar-default .collapse.navbar-collapse.navbar-ex1-collapse {
  display: block;
  float: left;
  width: 100%;
}

关于html - 分离顶部导航栏和侧边导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36935299/

文章推荐： javascript - 在 jQuery 中使用表中的升序和降序

文章推荐： c++ - gdb 可以查看所有源代码吗？

jpa - 同一实体的多个表示正在合并、分离
我在尝试使用 jpa2.0 将包含持久实体和分离实体(新创建的实体)的实体列表更新到我的数据库中时遇到错误。我的实体包含在合并数据时出现错误(在标题中提到)的内部实体: Class supercla
java - 分离 JLayeredPane
我在分层 Pane 中有一组面板。我需要一个分隔符来将 sideBar 与 topBar 和 tabbedPanel 分开。我留了一个 10 像素的缓冲区来放置它。不幸的是，可能由于它是 JLayer
android - 分离 EditText
在我从数据库中读取的代码中，我还使用自定义适配器打印出每一行，该行中有一个 texttview、2 个按钮和一个 edittext。这一切都很好，但是当按下按钮时，edittext 会递增或递减，有没
java - 分离/逐出具有非持久化子对象的对象树
我有一个由 Hibernate 4.3.4 管理的实体，它有一个其他实体的一对多集合。在我的处理过程中，我必须分离父实体(将分离级联到子列表)。但是，当我向列表中添加一个尚未持久化的新项目并执行分离
javascript - 确保附加行始终是动态创建的行组成的表中的最后一行。。分离()
我想追加一行，该行应该是表格的最后一行。在我的代码中，它似乎在第一次动态添加行时起作用。但是当添加其他行时它不会成为最后一行。我总是希望“subtot”行成为最后一行，但是当我追加其他行时，它不
html - 分离 Div
我试图用它们之间的空格分隔这 2 个 div(请参见图 1)。问题是当我添加边距或填充时会发生这种情况(请参见图 2)。这是我的代码，请注意我没有使用 Bootstrap: .row { mar
c# - 如何检测远程参与者断开连接(分离)？
我的服务器包含一些 ServerActor。该 actor 接收 RegisterClient 消息并将 ActorRefs 添加到已注册客户端列表中。我还有多个客户端，每个客户端都包含 Clien
Clojure:分离 comp 和部分参数
假设我有一个需要两个参数的函数，并且参数的顺序会影响结果。是否可以将第一个参数传递给 partial 或 comp 函数，然后将另一个参数传递给它，如下所示: (defn bar [arg1 arg
clojure - 分离 map 的多个后代键？
如何搜索和分离多个后代键。例子: (def d {:foo 123 :bar { :baz 456 :bam { :w
scala - Slick:动态创建查询连接/分离
我正在尝试为 Slick 表创建一个类型安全的动态 DSL，但不确定如何实现这一点。用户可以通过以 form/json 格式发送过滤器来将过滤器发布到服务器，我需要使用所有这些来构建一个 Slick
Reactjs 分离 UI 和业务逻辑
我是新来的，我发现看到充满大量函数和变量初始化以及 UI 的组件时眼睛很痛。是否可以将它们分开？而不是默认设置，如下所示。如何将业务逻辑分离到另一个文件中？ function MyComponent
r - 传递一个字符 arg。分离
我试图通过将参数粘贴在一起来使用分离。这应该是一件容易的工作，但不适合我。当我想到使用 eval(parse()) 时，我知道是时候寻求帮助了通常，如果我加载一个包，我可以按如下方式分离它: det
clojure - 与 pred 分离
(dissoc :a m)允许我解除给定的键。但是，有没有办法使用谓词函数来分离 pred 为真的任何键？ (dissoc-with-pred pred? m) 所以给了一张 map - {:a 2
r - 分离 R 包以升级它的可靠过程是什么？
我编写了一个使用 devtools 来包含内部数据的包: devtools::use_data(.data, internal = T, overwrite = T) 我最近更改了该数据并重建了包。我
terminal - 运行脚本时 tmux 分离
所以我有一个脚本，我想在我的服务器上运行它而不会打扰我。所以我想我会在 tmux 窗口中运行服务器，然后 detach这样我就可以简单地 attach如果我想查看进度(此脚本需要数天才能运行)。但是
javascript - 分离 ThreeJS 模型和动画数据
ThreeJS中动画数据和模型数据是否可以解耦？这样就可以交换模型并保留动画？我认为这可能非常强大我知道如何在 ThreeJS 中做到这一点的方法是将每个动画一个接一个地打包在一个模型中，这似乎是
docker - 分离 Docker 文件和应用程序源文件以优化生产环境
我有一堆(Ruby)脚本存储在服务器上。到目前为止，我的团队通过打开一个启动脚本名称列表的访问器应用程序来使用它们，然后他们在工作文件夹中的文件上选择要在该实例中运行的脚本。脚本直接从服务器运行，因此
javascript - 分离 Javascript 函数
我想知道 javascript 如何包含在 jsp 中 - 我们是否可以在 .js 文件中放置 jsp 能够识别的任何代码，而不仅仅是 javascript 代码？我有一些常见的 JavaScrip
默认为后台运行的 Dockerfile 选项(分离)
您是否可以在 Dockerfile 中指定一个选项，默认使用它构建的容器以分离方式运行。这将导致与 -d 相同的结果: docker run -d 这样 docker run 默认情况下会分离运
Java:分离 JAR 版本
我正在为现有的 Java 程序开发 Java 插件。现有程序使用特定版本的 eclipse.uml2.*，我的插件也是如此。不幸的是，我的插件需要更新版本。为了运行该插件，我需要将其导出到 Jar

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 分离顶部导航栏和侧边导航栏