Bootstrap - 菜单不能正常工作 [英] Bootstrap - Menu doesn't work well

查看：23 发布时间：2021/9/11 19:19:32 html css wordpress twitter-bootstrap

本文介绍了Bootstrap - 菜单不能正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在实现一个基于 css 形状的引导菜单，但我在显示子菜单时遇到了问题，我认为这是因为我在形状 div 中有一个固定的 div.

.menu {宽度:100%；高度:40px；背景颜色:蓝色；-webkit-clip-path: 多边形(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);剪辑路径:多边形(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%)；位置:相对；}.menu ul li {字体系列:'Seravek';字体大小:14px；文本转换:大写；}.menu:before {内容: '';宽度:99.5%；高度:38px；-webkit-clip-path: 多边形(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);剪辑路径:多边形(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%)；背景:灰色；显示:块；位置:绝对；顶部:2px；左:2px；右:2px；}.navbar-default .navbar-collapse, .navbar-default .navbar-form {高度:40px！重要；}.navbar-default .navbar-collapse #menu-menuprincipal, .navbar-default .navbar-form #menu-menuprincipal {高度:40px；}.navbar-default .navbar-collapse #menu-menuprincipal li, .navbar-default .navbar-form #menu-menuprincipal li {高度:40px；}.navbar-default .navbar-collapse #menu-menuprincipal li a, .navbar-default .navbar-form #menu-menuprincipal li a {填充顶部:0;填充底部:0;行高:40px；颜色:黑色;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz"crossEuK6ys><nav class="navbar navbar-default"><div class="container-fluid no-padding"><div class="row no-margin"><div class="col-xs-4 col-sm-4 col-md-3 logo"><div class="navbar-header"><a class="navbar-brand" href="/site/"><img alt="site" src="<?php bloginfo('template_url')?>/images/logo.png"></a>

<div class="col-xs-4 col-sm-4 col-md-9 no-padding"><div class="menu-operations"><div class="语言">

<div class="social">

<?phpwp_nav_menu( 数组('菜单' =>'菜单校长','theme_location' =>'基本的'，'深度' =>2、'容器' =>'div','container_class' =>'折叠导航栏折叠','container_id' =>'bs-example-navbar-collapse-1','menu_class' =>'nav navbar-nav navbar-right','fallback_cb' =>'wp_bootstrap_navwalker::fallback','步行者' =>新 wp_bootstrap_navwalker()));?>

'基本的'，'菜单' =>'','容器' =>'导航','container_class' =>'折叠导航栏折叠','container_id' =>'bs-example-navbar-collapse-1','menu_class' =>'nav navbar-nav navbar-right','menu_id' =>'导航'，'回声' =>真的，'fallback_cb' =>'wp_bootstrap_navwalker::fallback','步行者' =>新的 wp_bootstrap_navwalker，'之前' =>'','之后' =>'','link_before' =>'','link_after' =>'','items_wrap' =>'<ul id="%1$s" class="%2$s">%3$s</ul>','深度' =>0,));} 别的 {wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => '' ) );}?>

.menu { width: 100%; height: 40px; background-color: blue; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); position: relative; } .menu ul li { font-family: 'Seravek'; font-size: 14px; text-transform: uppercase; } .menu:before { content: ''; width: 99.5%; height: 38px; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); background: grey; display: block; position: absolute; top: 2px; left: 2px; right: 2px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { height: 40px !important; } .navbar-default .navbar-collapse #menu-menuprincipal, .navbar-default .navbar-form #menu-menuprincipal { height: 40px; } .navbar-default .navbar-collapse #menu-menuprincipal li, .navbar-default .navbar-form #menu-menuprincipal li { height: 40px; } .navbar-default .navbar-collapse #menu-menuprincipal li a, .navbar-default .navbar-form #menu-menuprincipal li a { padding-top: 0; padding-bottom: 0; line-height: 40px; color: black; }

<div class="menu"> <?php wp_nav_menu( array( 'menu' => 'menuPrincipal', 'theme_location' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav navbar-right', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div>

<?php if ( has_nav_menu( 'primary' ) ) { wp_nav_menu( array( 'theme_location' => 'primary', 'menu' => '', 'container' => 'nav', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav navbar-right', 'menu_id' => 'navigation', 'echo' => true, 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, ) ); } else { wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => '' ) ); } ?>

Bootstrap - 菜单不能正常工作 [英] Bootstrap - Menu doesn't work well

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Bootstrap - 菜单不能正常工作 [英] Bootstrap - Menu doesn&#39;t work well

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

Bootstrap - 菜单不能正常工作 [英] Bootstrap - Menu doesn't work well

登录关闭