我已经整理了一个使用三个模态的页面。第一个似乎工作正常，而第二个没有。出于某种原因，他们将出现一秒钟，然后链接到下面有一个href的网站。代码对我来说似乎都是一样的，我不能为我的生活决定为什么会发生这种情况。任何建议或见解都会非常感激，我相信有经验的程序员解决方案是显而易见的。
感谢您的帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scal=1">
<title>Jesse Stiff's Portfolio</title>
<link rel="stylesheet" href="custom.css">
<link href='https://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="col-md-6">
<img class="udacity-logo img-responsive alt="Logo"" src="http://cameronwp.github.io/cpcom/static/udacity_logo.svg" width="150" height="150" alt="Udacity Logo">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="title-super text-thin">Jesse Stiff</h1>
<h4>Front-end Ninja</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="hr">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="img-responsive center-block" src="http://s20.postimg.org/hubmpqrfh/Main1200x400.jpg" alt="Jesse Coding Image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-muted marginleft">Featured Work</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img class="img-responsive center-block" src="http://s20.postimg.org/7zkhjinh9/SAP300x200.jpg" alt="Resume Image" data-toggle="modal" data-target="#project1">
<h3 class="text-uppercase">Resume</h3>
<p><a href="https://reddit.com">Project Link</p>
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="http://s20.postimg.org/rip2svm8t/Arcade300x200.jpg" alt="Arcade Game Image" data-toggle="modal" data-target="#project2">
<h3 class="text-uppercase">Classic Arcade Game</h3>
<p><a href="https://reddit.com">Project Link</p>
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="http://s20.postimg.org/j61rh6gkd/Springfield300x200.jpg" alt="Neighborhood Map Image" data-toggle="modal" data-target="#project3">
<h3 class="text-uppercase">Neighborhood Map</h3>
<p><a href="https://reddit.com">Project Link</p>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://s20.postimg.org/7zkhjinh9/SAP300x200.jpg">
This will be a Description of my online resume once it is completed.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="project2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Classic Arcade Game</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://s20.postimg.org/rip2svm8t/Arcade300x200.jpg">
Here is the awsome classic arcade game I have not yet created!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="project3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Neighborhood Map</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://s20.postimg.org/j61rh6gkd/Springfield300x200.jpg">
Here is an amazing neighborhood map I created!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body></html>
答案 0 :(得分：0)
徽标img标记中有拼写错误，第一个"属性（alt）中有两个结束alt="Logo""。顺便说一下，我认为第一个是不必要的。
<img class="udacity-logo img-responsive alt="Logo"" src="http://cameronwp.github.io/cpcom/static/udacity_logo.svg" width="150" height="150" alt="Udacity Logo">
您提到的真正问题与缺少的结束标记有关。您为所有3 <a>文本打开了Project Link标记，但您从未关闭这些标记。在这里你可以看到。
<p><a href="https://reddit.com">Project Link</p>
如果您在结束</p>代码前关闭，那将是正确的。
<p><a href="https://reddit.com">Project Link</a></p>