Как установить положение выпадающего меню при уменьшении размера пикселя

Как центрировать мое выпадающее меню при уменьшении размера экрана. Я не могу попасть в раскрывающееся меню, потому что он слишком далеко от середины.Как установить положение выпадающего меню при уменьшении размера пикселя

жаль моей неловкой английской грамматики и кодирования языка

вот код

body { 
    padding-top: 60px; 
    padding-bottom: 40px; 
} 
.sidebar-nav { 
    padding: 9px 0; 
} 
.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    visibility: hidden; 
    margin-top: -1px; 
} 
.dropdown-menu li:hover .sub-menu { 
    visibility: visible; 
} 
.dropdown:hover .dropdown-menu { 
    display: block; 
} 
.nav-tabs .dropdown-menu, 
.nav-pills .dropdown-menu, 
.navbar .dropdown-menu { 
    margin-top: 0; 
} 
.navbar .sub-menu:before { 
    border-bottom: 7px solid transparent; 
    border-left: none; 
    border-right: 7px solid rgba(0, 0, 0, 0.2); 
    border-top: 7px solid transparent; 
    left: -7px; 
    top: 10px; 
} 
.navbar .sub-menu:after { 
    border-top: 6px solid transparent; 
    border-left: none; 
    border-right: 6px solid #fff; 
    border-bottom: 6px solid transparent; 
    left: 10px; 
    top: 11px; 
    left: -6px; 
}

<!DCTYPE html> 

<html> 

<head> 
    <meta charset="utf-8"></meta> 
    <title>Lavin By Lycka</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/custom.css" rel="stylesheet"> 
    <script src="js/respond.js"></script> 

    <style> 
    .navbar { 
     margin-top: 10%; 
    } 
    </style> 


</head> 

<body> 

    <div class="navbar navbar-default row"> 
    <div class="navbar-header"> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 

     </button> 

    </div> 

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

     <ul class="nav nav-justified"> 
     <li class=><a href="">home</a> 
     </li> 
     <li class="dropdown"><a data-toggle="dropdown" href="#">About <span class="caret"></span></a> 

      <ul class="dropdown-menu"> 
      <li><a href="#">home</a> 
      </li> 
      <li><a href="#">home</a> 
      </li> 
      </ul> 



     </li> 
     <li><a href="">Service</a> 
     </li> 
     <li><a href="">Contact</a> 
     </li> 

     </ul> 

    </div> 
    </div> 
    <!--container--> 
    <!-- javascript --> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body> 

</html>

источник

2015-07-02 Kevin Itsukawa

Взгляните на этот пример.

@media screen and (max-width: 768px) { 
.navbar .navbar-collapse a { 
    text-align: left; 
    padding-left: 43%; 
} 
.dropdown-submenu a { 
    padding-left: 44%; 
} 
.navbar .navbar-collapse .dropdown .dropdown-menu a { 
    padding-left: 45%; 
}}

Этот медиа-запрос, где вы можете настроить nav ссылки, однако вы должны ли они расположены в центре или слева, настроить отступы и выравнивание по мере необходимости. Надеюсь, это помогло.

.navbar { 
 
    border-radius: 0px; 
 
} 
 
.navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 
.navbar .navbar-collapse { 
 
    text-align: center; 
 
} 
 
.nav li a { 
 
    border-right: 1px solid #ccc; 
 
} 
 
.dropdown li a, 
 
.dropdown-menu li a { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 
.dropdown-submenu > .dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px 6px 6px 6px; 
 
    border-radius: 0px; 
 
} 
 
.dropdown-submenu:hover > .dropdown-menu { 
 
    display: block; 
 
} 
 
.dropdown-submenu > a:after { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
    border-width: 5px 0px 5px 5px; 
 
    border-left-color: #cccccc; 
 
    margin-top: 5px; 
 
    margin-right: -5px; 
 
} 
 
.dropdown-submenu:hover > a:after { 
 
    border-left-color: #ffffff; 
 
} 
 
.dropdown-submenu.pull-left { 
 
    float: none; 
 
} 
 
.dropdown-submenu.pull-left > .dropdown-menu { 
 
    left: -100%; 
 
    margin-left: 10px; 
 
    -webkit-border-radius: 6px 0px 6px 6px; 
 
    -moz-border-radius: 6px 0px 6px 6px; 
 
    border-radius: 6px 0px 6px 6px; 
 
} 
 
@media screen and (max-width: 768px) { 
 
    .center-block { 
 
    float: right; 
 
    } 
 
    .nav { 
 
    padding-left: 0; 
 
    } 
 
    .navbar-toggle { 
 
    float: none; 
 
    } 
 
    .navbar-header { 
 
    text-align: center; 
 
    } 
 
    .navbar-nav li a { 
 
    text-align: center; 
 
    } 
 
    .nav li a { 
 
    border-right: none; 
 
    } 
 
    .dropdown li a, 
 
    .dropdown-menu li a { 
 
    border-bottom: none; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">About</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a> 
 

 
      <ul role="menu" class="dropdown-menu"> 
 
      <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Shop</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a> 
 

 
      <ul role="menu" class="dropdown-menu"> 
 
      <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a> 
 

 
       <li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a> 
 

 
       <ul class="dropdown-menu"> 
 
        <li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a> 
 

 
        </li> 
 
        <li><a href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a> 
 

 
        </li> 
 
        <li><a href="#"><i class="fa fa-file-o fa-fw"></i> Login</a> 
 

 
        </li> 
 
       </ul> 
 
       </li> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 

 
     </li> 
 
     <li><a href="#">Blog</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

источник

2015-07-02 23:53:49 vanburen

сэр, спасибо, мир заслуживают большего количества людей, как вы –

добро пожаловать. Рад, что смог помочь. – vanburen

в любом случае сэр, когда я использую «nav nav-justified» выпадающее меню, когда я использую кнопку nav еще не в центре :(любое предложение? –

Как установить положение выпадающего меню при уменьшении размера пикселя

ответ

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