bootstrap 3.0导航栏中的链接无法在移动浏览器中运行

时间:2014-06-14 13:25:06

标签: jquery html css twitter-bootstrap

我已经包含bootstrap 3.0版本的bootstrap.js和bootstrap.css。我面临的问题是导航栏在桌面浏览器中工作正常,即使我调整浏览器大小但导航栏中的超链接无法在移动浏览器中运行。我知道独立于bootstrap导航栏应该可以工作,因为它提供了anchor标签。我是bootstrap的新手,我不知道我从哪里得到问题。

这是我的HTML代码:

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PCCCTSG</title>

    <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <style>
    .dropdown-menu{
    background:#333;

    }
    .dropdown-menu li a{
    color:#fff;

    }
    .row{
    color:#FFF; 
    }
.table-hover{
    color:#FFF;
}
.table-hover tr:hover{
    color:#333;
}
</style>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body style="font-family:cambria">
<div class="container" >
    <div class="row">
    &nbsp;
    </div>

    <div class="row glow"  style="background:#333">
        <div class="col-md-12 col-sm-12">   
        <div class="row row-centered">
         <img src="images/header-lg.jpg" width="1130" height="142" alt="header" style="padding-top:10px" id="img-head"/></div>      
        <div class="row">
        &nbsp;
        </div>
<div class="row row-centered" >
                <div class="col-md-12 col-sm-12">
                   <nav role="navigation" class="navbar navbar-inverse">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                         <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        </div>
                        <!-- Collection of nav links, forms, and other content for toggling -->
                        <div id="navbarCollapse" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html">About</a></li>
                                <li><a href="call-for-papers.html">Call for Papers</a></li>
                                <li class="active"><a href="#">Registration</a></li>
                                <li><a href="Committee.html">Committee</a></li>
                                <li><a href="important-dates.html">Important Dates</a></li>
                                <li><a href="Sponsor.html">Sponsorship</a></li>
                                <li><a href="#">Program</a></li>
                                <li><a href="#">Contact us</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="#">Inbox</a></li>
                                        <li><a href="#">Drafts</a></li>
                                        <li><a href="#">Sent Items</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Trash</a></li>
                                    </ul>
                                </li>-->
                            </ul>

                        </div>
                    </nav>
                </div>
               <div class="row row-centered">
                    <div class="col-md-10 col-centered">
                    <h5>Online registration page will be open soon. Please keep visiting the site for more updates.</h5>
                    <h4>The Registration fee is:</h4>
                    <div class="table-responsive">
                      <table width="686" class="table table-hover">
                        <tr>
                          <th width="219" scope="col">&nbsp;</th>
                          <th colspan="2" scope="col">Professionals</th>
                          <th colspan="2" scope="col">Students</th>
                        </tr>
                        <tr>
                          <th scope="row">&nbsp;</th>
                          <th width="104" scope="col">IEEE</th>
                          <th width="104" scope="col">Non-IEEE</th>
                          <th width="113" scope="col">IEEE </th>
                          <th width="112">Non-IEEE</th>
                        </tr>
                        <tr>
                          <th scope="row"><p>For Indian Delegates</p>
(In Indian Rupees)</th>
                          <td>6000</td>
                          <td>7000</td>
                          <td>3000</td>
                          <td>3750</td>
                        </tr>
                        <tr>
                          <th scope="row"><p>For Foreign Delegates</p>
(In US Dollars)</th>
                          <td>250</td>
                          <td>300</td>
                          <td>150</td>
                          <td>200</td>
                        </tr>
                      </table>
                    </div>
                    </div>
               </div>
                <div class="col-md-11 col-sm-11 col-centered" >
                    &nbsp;

                 </div>
          </div>
          <div class="row row-centered">
          <div class="col-md-12 col-centered">
           <span style="float:right;color:#fff">
        Powered by Tarragon
        </span>
        </div>
          </div>    
        </div>
    </div>
    <div class="row">
        <p style="float:right;color:#fff">&nbsp;


        </p>
    </div>
</div>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.min.js">
</script><script type="text/javascript" src="javascript/index.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

崩溃时您的ID不正确:

id="navbarCollapse"应为navigationbar

data-target无法找到您的崩溃,因为它正在寻找navigationbar,但您的ID为navbarCollapse。请记住,如果您使用的是数据目标,则必须与ID相同。你需要阅读Documentation更多人:

此处处于正常工作状态:Bootply Example