我正在使用 Bootstrap 创建网站，一切正常，但是当我在 iPhone 上查看该网站时，导航栏不会折叠。在我的 Windows Phone 上查看时，它运行完美。
这是我的标题代码，有人能看出为什么会这样吗？
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php wp_title( ' | ', true, 'right' ); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Top logo and Search Bar -->
<div class="row header navbar">
<div class="container">
<div class="col-md-3 logo-header hidden-xs hidden-sm">
<a href="<?php echo home_url(); ?>/">
<img src="<?php echo bloginfo('template_directory');?>/img/logo.jpg" alt="map consulting Logo" class="img-responsive">
</a>
</div>
<div class="col-md-3 logo-header hidden-lg hidden-md">
<a href="<?php echo home_url(); ?>/">
<img src="<?php echo bloginfo('template_directory');?>/img/logo.jpg" alt="map consulting Logo" class="img-responsive img-center">
</a>
</div>
<div class="clear"></div>
<div class="col-md-3 pull-right hidden-xs hidden-sm">
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="s">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div> <!-- end of col md 3 -->
<!-- Navigation for Phone and Tablet - hidden on large screens -->
<div class="row hidden-lg hidden-md" id="mobileSearch" style="margin-bottom:10px;">
<div class="col-xs-12">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-xs-12">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 1,
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav navbar-nav') ); ?>
</div>
</div>
</div>
<!-- Navbar for large screens, hidden when on phone or tablet -->
<div class="col-md-4 hidden-xs hidden-sm site-title pull-right">
<div class="navbar-header">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 1,
'container_class' => 'nav-large',
'menu_class' => 'nav navbar-nav') ); ?>
</div> <!-- navbar collapse -->
</div> <!-- navbar header -->
</div> <!-- col md 4 -->
</div> <!-- end of container -->
最佳答案
通过添加
解决了这个问题<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
到标题
关于html - Bootstrap 导航栏不会在 iPhone 上折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31782457/