Bootstrap模式中的图像问题

时间:2016-01-17 18:16:29

标签: html css twitter-bootstrap-3 modal-dialog bootstrap-modal

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">&times;</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>
  1. 如何使模式扩展其宽度以适合其包含的图像,而无需计算和使用图像宽度(以像素为单位)。
  2. 当模态水平延伸到当前视图之外时,如何在窗口本身上获得水平滚动条?

2 个答案:

答案 0 :(得分:2)

对于您的所有问题,RTFM

  

如何使模式扩展其宽度以适合其包含的图像,而无需计算和使用图像宽度(以像素为单位)。

班级.modal-dialog。它的默认width600px。这样做:

.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%;
}