logo标签列表

Bootstrap导航栏允许汉堡图标外有一个项目

csstwitter-bootstrapnavbar
3

我已经实现了一段代码。当浏览器窗口缩小（宽度方向），菜单选项卡会进入可点击的汉堡包图标。

我想保留这个功能，但在浏览器缩小尺寸时添加一个导航选项卡到汉堡包图标之外。

如何使用Bootstrap实现这一点？我试图添加另一个

<div class="navbar"> <ul class="nav navbar-nav"> <li> </li> </ul> </div>

在被标识为“mainNavBar”的元素之前，但这导致了糟糕的格式，我认为通过将两个div浮动在一起可能能够解决这个问题，但我无法想出相应的代码。

以下是我的代码。

<!DOCTYPE HTML>

<html>

<head>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

<body>

  <!-- Navigation bar -->
  <nav class="navbar navbar-custom navbar-fixed-top">

    <div class="container-fluid">

      <!-- Logo -->

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">

          <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>

        </button>

        <a href="../homepage.html" class="navbar-brand"> Markets</a>

      </div>

      <!-- menu items -->

      <div class="collapse navbar-collapse" id="mainNavBar">

        <ul class="nav navbar-nav navbar-right">

          <li> <a href="../aboutus.html">About Us</a> 
          </li>
          <li> <a href="../news.html">News</a> 
          </li>
          <li> <a href="../analysis.html">Analysis</a> 
          </li>
          <li> <a href="../randomarticle.html">Random Article</a> 
          </li>
          <li> <a href="../contactus.html">Contact Us</a>

          </li>

      </div>
  </nav>
  <!-- End Navigation Bar -->

</body>

</html>

1个回答
2

Bootply: http://www.bootply.com/Vky1AGlU5F

CSS:

.still_on_view{
    float: right;
}

HTML:

  <nav class="navbar navbar-custom navbar-fixed-top">

    <div class="container-fluid">

      <!-- Logo -->

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">

          <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>

        </button>

        <ul class="still_on_view nav navbar-nav">

          <li> <a href="../aboutus.html">About Usb2</a> 
          </ul>
        <a href="../homepage.html" class="navbar-brand"> Markets</a>

      </div>
      <div>

      </div>

      <!-- menu items -->

      <div class="collapse navbar-collapse" id="mainNavBar">

        <ul class="nav navbar-nav navbar-right">

          <li> <a href="../aboutus.html">About Us</a> 
          </li>
          <li> <a href="../news.html">News</a> 
          </li>
          <li> <a href="../analysis.html">Analysis</a> 
          </li>
          <li> <a href="../randomarticle.html">Random Article</a> 
          </li>
          <li> <a href="../contactus.html">Contact Us</a>

          </li>

      </div>
  </nav>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接