twitter-bootstrap 在 Bootstrap 模态框中使用 <img>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18812033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using <img> in Bootstrap Modal Box
提问by BHWD
I have a couple of working modal boxes on my site and I am trying to add a new one. The existing boxes only have plain text and have not been an issue.
我的网站上有几个工作模态框，我正在尝试添加一个新的。现有的框只有纯文本，没有问题。
The new one has an IMG in the modal body but when I refresh the page the modal box is loaded and sits at the top of my site, if I remove the image it works as expected (minus the image)
新的在模态体中有一个 IMG，但是当我刷新页面时，模态框被加载并位于我网站的顶部，如果我删除图像，它会按预期工作（减去图像）
Link code:
链接代码：
<a href="#clarissa" role="button" data-toggle="modal">Clarissa Bonnel</a>
Modal Box:
模态框：
Any suggestions?
有什么建议？
回答by Girish Thimmegowda
Please check this linkwhich contains the working modal with image.
请检查此链接，其中包含带图像的工作模式。
Code:
代码：
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
</head>
<body>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://vmatechs.com/wp-content/uploads/2013/07/android.jpg" alt="image" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
this linkto working modal with image and text
这个链接到使用图像和文本的工作模式
回答by Amit
This code is working perfectly well. May be you might not have included the jquery and bootstrap js files
这段代码运行良好。可能你没有包含 jquery 和 bootstrap js 文件
<!doctype html>
<html lang="en">
<head>
<title>Amit Wecomes you</title>
<link type="text/css" rel="Stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<a href="#clarissa" role="button" data-toggle="modal">Clarissa Bonnel</a>
<!-- Modal -->
<div id="clarissa" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button></p>
</div>
<div class="modal-body">
<img src="images/amit.jpg" align="left"/>
I am Clarissa. I am also 34 years old, half Italian - half French with a little Australian and Romanian twist. I speak 5 languages. My career has been a roller coaster in terms of locations and roles. For more than 11 years, I have lived and worked across the globe, mainly in international organisations, media and professional services, in journalism, sales, client relationship management and event organising. Throughout this journey, I have met a lot of people who have become frustrated because of a mismatch between their goal in life and their current situation without any plan for them to get what they want and deserve.
</div>
</div>
<!-- End Modal -->
<script src="bootstrap/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Use this code, I have placed your content inside my modal and its working fine. I used another image to try out your code.
使用此代码，我已将您的内容放在我的模态中并且工作正常。我用另一个图像来尝试你的代码。
Enjoy Cheers!!!
享受干杯！！！
回答by Vincent
I wanted to include this because I searched for days for this answer as to why an image broke the css in the bootstrap modal. I am adding this to the bottom because the answer is hidden within all the comments at the top of the page and others may be looking for it.
我想包括这个，因为我搜索了几天来寻找这个关于为什么图像破坏了引导模式中的 css 的答案。我将这个添加到底部是因为答案隐藏在页面顶部的所有评论中，其他人可能正在寻找它。
The actual answer that worked for me was the change in the CSS that Girish Gowda provided. I wanted to give credit where credit is due.
对我有用的实际答案是 Girish Gowda 提供的 CSS 更改。我想在信用到期的地方给予信用。
so final .modalclass should look like this...
所以最后一.modal堂课应该是这样的......
.modal {
left: 20%;
right: 20%;
top: 10%;
bottom: 10%;
width: 60%;
overflow: auto;
position: fixed;
z-index: 2000;
display: none;
}
I will say that I did end up changing the left: 20%to 40%as my modal was showing up off the left side of the screen, but other than that this fixed all the CSS confusion problems that the image caused. Thank you to Girish Gowda for the answer.
我会说我最终改变了left: 20%，40%因为我的模式显示在屏幕的左侧，但除此之外，这修复了图像引起的所有 CSS 混淆问题。感谢 Girish Gowda 的回答。
