http://codepen.io/anon/pen/jWGXKJ
<a data-toggle="modal" href="#modal" class="btn btn-primary">Open</a>
<div id="modal" class="modal modal-wide fade">
<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 src="http://i.imgur.com/aZO5Kol.jpg"/>
</div>
</div>
</div>
</div>
答案 0 :(得分:2)
对于您的所有问题,RTFM:
如何使模式扩展其宽度以适合其包含的图像,而无需计算和使用图像宽度(以像素为单位)。
班级.modal-dialog
。它的默认width
为600px
。这样做:
.modal {
text-align: center; /* Center the modal window. */
}
.modal-dialog {
width: auto;
margin: 30px auto;
display: inline-block;
}
当模态水平延伸超出当前视图时,如何获得水平滚动条?
这将确保,如果内容超出模态窗口范围,它将显示滚动条。
.modal-dialog {
overflow: auto;
}
答案 1 :(得分:0)
1) 不需要像素 您可以使用百分比%
来完成img{
width:100%;
}