由于我已经包含了一些样式表和java脚本，我的bootstrap模式不再正常工作。看来这个div与＆＃34;模态背景＆＃34; class位于div的前面，带有＆＃34; modal＆＃34;类。模态内容仅在小型可滚动div中可见。 单击按钮时可以看到问题：http://tamara-alber.de/meseck/bootstrap/index.html
我不知道为什么它搞砸了。我无法解决问题。谢谢你的帮助。
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"></link>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic"></link>
<link type="text/css" href="font-awesome/css/font-awesome.min.css" rel="stylesheet"></link>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Animate CSS -->
<link rel="stylesheet" href="css/animate.css">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<!-- Lightbox CSS -->
<link type="text/css" href="css/lightbox.css" rel="stylesheet">
<link type="text/css" href="css/dark.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script type="text/javascript" src="js/scrolling-nav.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/ekko-lightbox.js"></script>
<script>
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
always_show_close: true
});
});
});
new WOW().init();
$(window).stellar({ horizontalScrolling: false });
</script>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Frederick Meseck</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">Test?</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Test</a>
</li>
<li>
<a class="page-scroll" href="#pricing">Test</a>
</li>
<li>
<a class="page-scroll" href="#angebot">Test</a>
</li>
<li>
<a class="page-scroll" href="#contact">Test</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section" data-stellar-background-ratio="0.1">
<div class="container">
<div class="row">
<div class="col-lg-12 wow animated bounceInDown">
<a class="page-scroll" href="#about"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></a>
</div>
</div>
</div>
</section>
<!-- Wofür Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row wow animated zoomIn" data-wow-duration="700ms">
<div class="col-lg-12">
<h1 class="special-heading dark-special">Test?</h1>
<h3 class="section-subheading text-muted">Test</h3>
</div>
</div>
</div>
</section>
<!-- Erfahren Sie mehr -->
<section class="technology-section">
<div class="container">
<div class="row wow animated zoomIn">
<div class="col-lg-12">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Button</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title special-heading dark-special">Features und Technologie</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<div class="featurebox margin-btm-30">
<i class="fa fa-html5"></i>
<div class="featuretext">
<h4>Test</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div><!-- END OF FEATUREBOX 1 -->
</div><!-- END OF COL FEATURE BOX1 -->
<div class="col-md-4 margin-btm-30">
<img src="images/frederick_meseck_angebot_starter_plus" class="img-responsive featureimg" alt="">
</div><!-- END OF COL FEATURE BOX2 -->
<div class="col-md-4">
<div class="featureboxleft margin-btm-30 ">
<i class="fa fa-envelope"></i>
<div class="featuretext">
<h4>Test</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div><!-- END OF FEATUREBOX 1 -->
</div><!-- END OF COL FEATURE BOX3 -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
答案 0 :(得分：0)
来自Bootstrap docs ...
模态标记位置始终尝试将模式的HTML代码放入 文档中的顶级位置以避免其他组件 影响模态的外观和/或功能。
如上所述，如果您移动标记以使其不再嵌套在其他元素中，例如在结束</body>之前，它将按预期工作。