2015-06-01 62 views
0

我刚刚在一个新网站上的后端工作,当我注意到前端出现大错误时,我卡住了试图解决这个问题。当你在iPhone上打开它时,下拉菜单会自动关闭(Bootstrap v3.3.1)

我有一个旧版本的网站,我一直在努力,并在新版本中移动并整理了其余部分。但是,当我转到iPhone上的Safari浏览器时,尽管在旧网站上复制了网站页眉和页脚(包含相同的菜单),但它并未正确加载下拉菜单。

当你按下菜单时,它将打开,然后立即在iPhone上关闭。但铬和Firefox浏览器工作正常。我试着去看论坛并更改bootstrap代码,但似乎没有任何工作。它只在响应菜单下拉菜单中执行。

奇怪的是,旧网站有全宽下拉菜单,新网站粘在右侧(不是全宽),就好像它没有正确加载一样。

旧址(工作)

old.hidden-network.co.uk

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title><?php echo $title; ?> | Social Research Unit</title> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="keywords" content="<?php echo $keywords; ?>"> 
    <meta name="description" content="<?php echo $description; ?>"> 
    <link rel="icon" href="/inc/img/favicon.ico" type="image/x-icon"> 
    <link rel="shortcut icon" href="/inc/img/favicon.ico" type="image/x-icon"> 
    <link href="/inc/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="/inc/css/prettyPhoto.css" rel="stylesheet"> 
    <link href="/inc/css/screen.min.css" rel="stylesheet" media="screen"> 
    <link href="/inc/css/print.min.css" rel="stylesheet" media="print"> 
    <!--[if lt IE 9]> 
     <script src="/inc/js/html5shiv.min.js"></script> 
     <script src="/inc/js/respond.min.js"></script> 
    <![endif]--> 
    <script type="text/javascript" src="/inc/js/jquery.min.js"></script> 
</head> 
<body> 
    <!-- HEADER START --> 
    <nav class="navbar navbar-fixed-top dartNavbar" role="navigation"> 
     <div class="container"> 
      <?php $lang->getLinks(); ?> 
      <div class="navbar-header"> 
       <a type="button" class="navbar-toggle collapsed dartMenuButton" data-toggle="collapse" href="#" 
        data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        Menu 
       </a> 
       <a class="navbar-brand dartNavbar-brand" href="/"> 
        <div class="titleShapes"> 
         <span class="DataUnit" title="Data Unit"></span> 
         <span class="WhatWorksUnit" title="What Works Unit"></span> 
         <span class="InnovationUnit" title="Innovation Unit"></span> 
         <span class="PlaceUnit" title="Place Unit"></span> 
        </div> 
        <img src="/inc/img/logo.full.png" alt="Dartington Social Research Unit" /> 
       </a> 
      </div> 

      <div id="navbar" class="navbar-collapse collapse no-transistion"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li<?php $if->active('about'); ?>> 
         <a href="/About/">About</a> 
        </li> 

        <li<?php $if->active('process'); ?>> 
         <a href="/methods/">Methods</a> 
        </li> 

        <li<?php $if->active('projects'); ?>> 
         <a href="/projects/">Projects</a> 
        </li> 

        <li<?php $if->active('resources'); ?>> 
         <a href="/resources/">Resource</a> 
        </li> 

        <li<?php $if->active('contact'); ?>> 
         <a href="/contact/">Contact</a> 
        </li> 

        <li class="youtube"> 
         <a href="https://youtube.com/socialresearchunit" target="_blank"> 
          <div class="icon"></div> 
         </a> 
        </li> 

        <li class="twitter"> 
         <a href="https://twitter.com/socialresunit" target="_blank"> 
          <div class="icon"></div>       
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <!-- HEADER ENDS --> 

    <!-- CONTENT STARTS --> 
    <div class="content"> 

新网站(不工作)

new.hidden-network.co.uk

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title><?php echo $title; ?> | Social Research Unit</title> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="keywords" content="<?php echo $keywords; ?>"> 
    <meta name="description" content="<?php echo $description; ?>"> 
    <link rel="icon" href="/inc/img/favicon.ico" type="image/x-icon"> 
    <link rel="shortcut icon" href="/inc/img/favicon.ico" type="image/x-icon"> 
    <link href="/inc/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="/inc/css/prettyPhoto.css" rel="stylesheet"> 
    <link href="/inc/css/screen.min.css" rel="stylesheet" media="screen"> 
    <link href="/inc/css/print.min.css" rel="stylesheet" media="print"> 
    <!--[if lt IE 9]> 
     <script src="/inc/js/html5shiv.min.js"></script> 
     <script src="/inc/js/respond.min.js"></script> 
    <![endif]--> 
    <script type="text/javascript" src="/inc/js/jquery.min.js"></script> 
    <script type="text/javascript" src="/inc/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <!-- HEADER START --> 
    <nav class="navbar navbar-fixed-top dartNavbar" role="navigation"> 
     <div class="container"> 
      <?php $lang->getLinks(); ?> 
      <div class="navbar-header"> 
       <a type="button" class="navbar-toggle collapsed dartMenuButton" data-toggle="collapse" href="#" 
        data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <div class="icon-bar icon-bar-top"></div> 
        <div class="icon-bar"></div> 
        <div class="icon-bar"></div> 
       </a> 
       <a class="navbar-brand dartNavbar-brand" href="/"> 
        <div class="titleShapes"> 
         <span class="DataUnit" title="Data Unit"></span> 
         <span class="WhatWorksUnit" title="What Works Unit"></span> 
         <span class="InnovationUnit" title="Innovation Unit"></span> 
         <span class="PlaceUnit" title="Place Unit"></span> 
        </div> 
        <img src="/inc/img/logo.full.png" alt="Dartington Social Research Unit" class="hidden-xs hidden-sm" /> 
        <img src="/inc/img/logo.full.notext.png" alt="Dartington Social Research Unit" class="hidden-md hidden-lg" /> 
       </a> 
      </div> 

      <div id="navbar" class="navbar-collapse collapse no-transistion"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li<?php $if->active('about'); ?>> 
         <a href="/about/">About</a> 
        </li> 

        <li<?php $if->active('methods'); ?>> 
         <a href="/methods/">Methods</a> 
        </li> 

        <li<?php $if->active('projects'); ?>> 
         <a href="/projects/">Projects</a> 
        </li> 

        <li<?php $if->active('resources'); ?>> 
         <a href="/resources/">Resource</a> 
        </li> 

        <li<?php $if->active('contact'); ?>> 
         <a href="/contact/">Contact</a> 
        </li> 

        <li class="youtube"> 
         <a href="https://youtube.com/socialresearchunit" target="_blank"> 
          <div class="icon"></div> 
         </a> 
        </li> 

        <li class="twitter"> 
         <a href="https://twitter.com/socialresunit" target="_blank"> 
          <div class="icon"></div>       
         </a> 
        </li> 

        <li class="search"> 
         <a onClick="search()"> 
          <div class="icon"></div> 
          <span> 
           <input type="text" id="search" data-search="Search" /> 
          </span> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <!-- HEADER ENDS --> 

    <!-- CONTENT STARTS --> 
    <div class="content"> 
+0

其工作.... – vel

+0

该网站适用于桌面浏览器,它可以在iPhone上使用吗? –

+0

.navbar-right {position:absolute;}删除此样式。 – vel

回答

0

.navbar-right {position:absolute;}删除此样式。 - vel

这很好,thankyou vel!

相关问题