Question

我有一个我正在使用的引导程序模板，但是一旦我准备开始链接页面，我注意到UL中其他页面的链接没有按预期工作。我搜索了网站，尝试了一些修复和帖子，但没有运气。此外，如果有人可以看到它，我有第二个问题，此时并不那么迫切，但是当你点击汉堡包图标时，菜单的动员版本会扩展，但不会缩回。任何见解都非常感谢。提前谢谢！

＆＃13;

.navigation {
	min-height: 70px;
    }

    .navigation .navbar {
	border: none;
	margin-bottom: 0;
	min-height: 70px;
    }
    .navigation .navbar .navbar-brand {
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	height: 70px;
	line-height: 35px;
    }
    .navigation .navbar-default {
	background-color: #0091D5;
	box-shadow: 0 0px 10px rgba(0,0,0,.2);
	border: none;
	border-radius: 0;
	clear: both;
    }
    .navigation .navbar-default .navbar-nav>li>a {
	color: #fff;
	font-weight: 500;
	padding-top: 25px;
	padding-bottom: 25px;
    }

    .navigation .navbar-default .navbar-nav>li>a:hover,
    .navigation .navbar-default .navbar-nav>.active>a,
    .navigation .navbar-default .navbar-nav>.active>a:hover,
    .navigation .navbar-default .navbar-nav>.active>a:focus {
 	background: none;
 	color: #FFFFFF;
     }
     .navigation .btn-default:hover,
     .navigation .btn-default:focus,
     .navigation .btn-default:active,
     .navigation .btn-default.active {
	  border-color: transparent;
     }

＆＃13;

 <section id="menu">
      <div class="navigation">
        <div id="main-nav" class="navbar navbar-default" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <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> <!-- end .navbar-header -->

            <div class="navbar-collapse collapse">
              <ul id="ulnav" class="nav navbar-nav">
              <li><a href="index.html" target="_parent">&nbsp;&nbsp;Home</a></li>
               <li><a href="water-damage.html" target="_parent">Water Damage</a></li>
                <li><a href="#">Fire Damage</a></li>
                <li><a href="#">Drying Services</a></li>
                <li><a href="#">Restoration</a></li>
                <li><a href="#">Commercial</a></li>
                <li><a href="#">Reviews</a></li>
                <li><a href="#">Insurance & Financing</a></li>
                <li><a href="#">About Us</a></li>
                <li class="cwaf-bg"><a href="#">Free Estimate</a></li>
              </ul>
            </div><!-- end .navbar-collapse -->

          </div> <!-- end .container -->
        </div> <!-- end #main-nav -->
      </div> <!-- end .navigation -->
    </section>

＆＃13;

Answer 1

您是否包含了boostrap？

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head<

Answer 2

在评论部分解决了问题。此实例与预先打包的单页模板有关，该模板在其默认的JS库中进行了导航修改。

Answer 3

请执行以下步骤。

首先，您必须将bootstrap.added这些链接加载到head部分。

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

然后您可以在正文部分添加这些代码部分。

<body>

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>




<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="index.html" target="_parent">&nbsp;&nbsp;Home</a></li>
           <li><a href="water-damage.html" target="_parent">Water Damage</a></li>
            <li><a href="#">Fire Damage</a></li>
            <li><a href="#">Drying Services</a></li>
            <li><a href="#">Restoration</a></li>
            <li><a href="#">Commercial</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Insurance & Financing</a></li>
            <li><a href="#">About Us</a></li>
            <li class="cwaf-bg"><a href="#">Free Estimate</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



</body>

我检查这个cord.it的工作没有任何问题。我附上了快照。请检查一下。

UL导航链接未按预期工作 - HTML / CSS

3 个答案: