Navbar Bootstrap, позволяющий одному элементу находиться за пределами гамбургер-гамбургера

Я реализовал кусок кода. Когда окно браузера уменьшается в размере (ширины), вкладки меню входят в кликсируемый гамбургский гамбургер.Navbar Bootstrap, позволяющий одному элементу находиться за пределами гамбургер-гамбургера

Я хотел бы сохранить эту функцию, но добавьте одну навигационную вкладку за пределы глификона, когда браузер уменьшит размер.

Как это возможно, используя бутстрап? Я попытался добавить еще

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

до одного опознали «mainNavBar», однако это привело к плохому форматирования, который я думал, мог бы быть исправлено путем размещения двух див рядом друг с другом, но я не удалось выработать код для этого.

Ниже приведен мой код.

<!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>

источник

2016-04-06 Prodigy

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>

источник

2016-04-06 21:16:34 pbenard

Navbar Bootstrap, позволяющий одному элементу находиться за пределами гамбургер-гамбургера

ответ

Смежные вопросы