我已经使用我的模态img滑块从引导程序转了几个星期 - 我现在已经有点工作了 - 当窗口转到sm / xs时有一个摆动和一些裁剪...想知道天气它可能调整img滑块和模态框的大小，使img始终处于最大值。宽度/高度可以为所有侧面留下一点空间 另一个问题是，我可能已经改变了我的代码中的任何内容..因为我已经尝试修复模态，当我只是点击灰色背景时，模态不再崩溃，唯一的方法是让崩溃是单击关闭按钮。 从那时起，大帐篷确实会停止运行
Bootsrtap css和jquery的公寓我使用了那段代码：
<html>
<head>
<title>Anton Hörl, München Skulpturen und Grafiken</title>
<meta content="" name="keywords">
<meta content="" name="description">
<meta content="index,follow" name="robots">
<meta content="" name="author">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/zeichnungen.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/custom.js"></script>
<script src="js/bootstrap.js"></script>
<marquee scrollamount="1" scrolldelay="1"> nächste Ausstellung am...</marquee>
<!--NAVBAR-->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<li class="active"><a class="navbar-brand" href="#"><img src="Bilder/grafik4.jpg" type="picture/jpg"/></a></li>
</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="#">Figuren</a></li>
<li><a href="#">Zeichnungen</a></li>
<li><a href="#">Vita</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Englisch</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Kontakt und Impressum<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">A.H</a></li>
<li><a href="#">Kontakt</a></li>
<li class="divider"></li>
<li><a href="#">Webseitengestaltung</a></li>
<li><a href="#">Foto und Film</a></li>
<li class="divider"></li>
<li><a href="#">Copyright 2014</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--NAVBAR ENDE-->
<div class="container"data-toggle="modal" data-target="#myModal">
<div class="row">
<h1>Zeichnungen</h1>
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"data-target="#myModal" data-slide-to="0"><img class="thumbnail img-responsive active" src="Zeichnungen/1.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"data-target="#myModal" data-slide-to="1"><img class="thumbnail img-responsive" src="Zeichnungen/2.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"data-target="#myModal" data-slide-to="2"><img class="thumbnail img-responsive" src="Zeichnungen/3.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"data-target="#myModal" data-slide-to="3"><img class="thumbnail img-responsive" src="Zeichnungen/4.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"data-target="#myModal" data-slide-to="4"><img class="thumbnail img-responsive" src="Zeichnungen/5.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"data-target="#myModal" data-slide-to="5"><img class="thumbnail img-responsive" src="Zeichnungen/6.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 7" href="#"data-target="#myModal" data-slide-to="6"><img class="thumbnail img-responsive" src="Zeichnungen/7.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"data-target="#myModal" data-slide-to="7"><img class="thumbnail img-responsive" src="Zeichnungen/8.jpg"></a></div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade container" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog-row row">
<div class="modal-content col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-7 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-5">
<div class="modal-header">
<button type="button" class="btn btn-default" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner">
<div class="item active" title="Image 1">
<h3 class="modal-title">Image 1</h3>
<a href="#" title="Image 1"><img class="thumbnail img-responsive" src="Zeichnungen/1.jpg"></a>
</div>
<div class="item " title="Image 2">
<h3 class="modal-title">Image 2</h3>
<a href="#" title="Image 2">
<img class="thumbnail img-responsive" src="Zeichnungen/2.jpg">
</a>
</div>
<div class="item" title="Image 3"><h3 class="modal-title">Image 3</h3>
<a href="#" title="Image 3">
<img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
</a>
</div>
<div class="item" title="Image 4"><h3 class="modal-title">Image 4</h3>
<a href="#" title="Image 4">
<img class="thumbnail img-responsive" src="Zeichnungen/4.jpg">
</a>
</div>
<div class="item" title="Image 5"><h3 class="modal-title">Image 5</h3>
<a href="#" title="Image 5">
<img class="thumbnail img-responsive" src="Zeichnungen/5.jpg">
</a>
</div>
<div class="item" title="Image 6"><h3 class="modal-title">Image 6</h3><p class="modal-title">Größe:</p>
<a href="#" title="Image 6">
<img class="thumbnail img-responsive" src="Zeichnungen/6.jpg">
</a>
</div>
<div class="item" title="Image 7"><h3 class="modal-title">Image 7</h3>
<a href="#" title="Image 7">
<img class="thumbnail img-responsive" src="Zeichnungen/7.jpg">
</a>
</div>
<div class="item" title="Image 8"><h3 class="modal-title">Image 8</h3>
<a href="#" title="Image 8">
<img class="thumbnail img-responsive"Style="width: 100%; height: auto; margin-top:25%;" src="Zeichnungen/8.jpg">
</a>
</div>
</div>
<a class="carousel-control left" href="#modalCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"src="Bilder/arror left.gif"Style="width: 95%; height: auto;transform: translate(5%); margin-top:50%;"></i></a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"src="Bilder/arror right.gif"Style="width: 95%; height: auto;transform: translate(5%); margin-top:50%;"></i></a>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
.thumbnail {margin-bottom:10px;}
.modal-header {
text-align: right;
}
.modal-body {
max-height: 95% !important;
max-width: 95% !important;
padding: 20px !important;
}
.modal-dialog-row {
z-index:1050;
right:auto;
padding:10px;
padding-top:30px;
padding-bottom:10px;
margin-right:auto;
}
.modal-content {
background-clip: padding-box;
background-color: transparent !important;
border: 0px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0px !important;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5)!important;
outline: medium none;
position: relative;
text-align:center;
color: white;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:5%;
padding-right: 5%;
width:5%;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev, .carousel-control .icon-next {
margin-left: 10px !important;
margin-right: -15px !important;
}
button.btn-default {
background: none repeat scroll 0 0 white!important;
border: 10px none!important;
border-radius: 20px !important;
color: grey!important;
height: 30px!important;
margin-right: 10px !important;
width: 30px!important;
}
.btn-default {
color: grey!important;
font-size: 45px!important;
line-height: 0!important;
opacity: 1!important;
text-shadow: 1px 2px 2px rgba(145, 168, 129, 1)!important;
}
答案 0 :(得分：0)
仅使用默认的Bootstrap文件无法实现灯箱。当然你可以定制它，但为什么重新发明轮子？我的建议是使用某人已创建的插件。
一些建议：
Nivo Lightbox是一个很棒的灯箱，拥有MIT许可证。它与Bootstrap有一个非常轻微的CSS兼容性问题（与box-sizing：border-box有关），但这很容易解决。
Bootstrap 3 Lightbox。我从来没有真正使用它，但似乎能够做你想要的。拥有GNU通用公共许可证。