выпадающее подменю не выровнено правильно. он идет к верхним

-1

моего NavBar подменит идет как это, когда я иду на экран мобильного телефона my navbar submenu goes like this when i go to mobile screen выпадающее подменю не выровнено правильно. он идет к верхним

это то, что я хочу быть с моим NavBar подменит, когда я использую мобильный экран.

this is what i want to be happen to my navbar submenu when i use mobile screen.

здесь код я использовал. кто-то пытается объяснить мне

.navbar-toggle { 
 
    z-index:3; 
 
} 
 

 
.navbar-nav { 
 
    float:none; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:none; 
 
}

<div class="container"> 
 
\t <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-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     
 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Sauce</a></li> 
 
     \t <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Syrup <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> 
 
     <li><a href="#">Frappe</a></li> 
 
     <li><a href="#">Accessories</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
</nav> 
 
</div>

источник

2017-02-22 France

Как наилучшая практика UX, использование выпадающих плавающих меню на мобильных устройствах не рекомендуется. –

Вы можете сделать это в этом way--

Рабочий пример

<html> 
 
<head> 
 
<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.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
    #dropdown-menu { 
 
position: absolute; 
 
background-color: white; 
 
border: 2px; 
 
} 
 

 
.navbar-nav { 
 
    float:none; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:left; 
 
} 
 
      </style> 
 
      
 
      </head> 
 
      <body> 
 
      <div class="container-fluid"> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    
 
     <ul class="nav navbar-nav"> 
 
     <div class="row"> 
 
<div class="col-xs-2"> 
 
     <li><a href="#">Home</a></li> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <li><a href="#">Sauce</a></li> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Syrup <b class="caret"></b></a> 
 
      <ul id="dropdown-menu" 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> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <li style="float: right;"><a href="#">Frappe</a></li> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <li style="float: right;"><a href="#">Accessories</a></li> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <li style="float: right;"><a href="#">Contact</a></li> 
 
     </div> 
 
     </div> 
 
     </ul> 
 

 
    <!-- /.navbar-collapse --> 
 
</nav> 
 
</div> 
 

 
      </body> 
 
      </html>

Надеюсь, это поможет!

источник

2017-02-22 04:37:36 neophyte

выпадающее подменю не выровнено правильно. он идет к верхним

ответ

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