[英]Twitter Bootstrap and mobile navbar
我正试图在Wordpress上为我的博客制作一个响应式布局,但我无法通过移动设备上的navbar解决问题。
<header class="span8" id="top-header">
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php
wp_nav_menu(array(
'menu' => 'Top menu',
'menu_class' => 'nav'
));
?>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>
<ul class="dropdown-menu">
<?php
$args = array(
'exclude' =>'1',
'orderby' =>'name',
'order' => 'ASC'
);
foreach(get_categories($args) as $category): ?>
<li><a href="<?php echo get_category_link($category->term_id); ?>" title="Category: <?php echo $category->name; ?>"><?php echo $category->name; ?></a></li>
<?php endforeach; ?>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?> - Back to the homepage">
<hgroup class="row-fluid">
<?php if(is_single()):?>
<h2 class="like-h1">My blog</h2>
<?php else: ?>
<h1>My blog</h1>
<?php endif; ?>
<h2>Bla bla bla</h2>
</hgroup>
</a>
</header>
在移动设备上,下拉列表不像Twitter Bootstrap的示例那样有效,但它显示了导航栏中的每个链接。 它没有切换。 你可以在这里看到它: 我的博客示例
您需要将菜单包装在<div class="nav-collapse">..</div>
div中,以便在屏幕调整大小/移动视图时折叠您的菜单。 尝试这个:
HTML
<header class="span8" id="top-header">
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<?php
wp_nav_menu(array(
'menu' => 'Top menu',
'menu_class' => 'nav'
));
?>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>
<ul class="dropdown-menu">
<?php
$args = array(
'exclude' =>'1',
'orderby' =>'name',
'order' => 'ASC'
);
foreach(get_categories($args) as $category): ?>
<li><a href="<?php echo get_category_link($category->term_id); ?>" title="Category: <?php echo $category->name; ?>"><?php echo $category->name; ?></a></li>
<?php endforeach; ?>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?> - Back to the homepage">
<hgroup class="row-fluid">
<?php if(is_single()):?>
<h2 class="like-h1">My blog</h2>
<?php else: ?>
<h1>My blog</h1>
<?php endif; ?>
<h2>Bla bla bla</h2>
</hgroup>
</a>
</header>
此外,我建议你从你的页面header
分离你的固定导航并在body
标签后隔离它,这样当你调整屏幕大小时,媒体查询或header
周围的样式不会影响顶部导航栏,这不应该在移动视图上修复。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.