如何在Bootstrap模式中删除图像右侧的空白区域？

Question

我正在为我的网站使用 Bootstrap v3.3.0 。

我正在将图像显示为自举模式。但是我在图像右侧获得额外的空白区域，进入一个自举模式对话框。我通过将宽度设置为自动/修复大小，将左右边距设置为自动等来尝试了几个CSS技巧，但是没有成功，所以请求帮助。

以下是我的引导模态代码。

<div id="myModal1" class="modal fade in" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: block;">
  <div class="modal-backdrop fade in"></div>
  <div class="modal-dialog" style="margin-top: -20.5px;">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 id="myModalLabel" class="modal-title">
          Rebate Receipt
        </h4>
      </div>
      <div class="modal-body" style="max-height: 420px; overflow: auto; margin-left:auto; margin-right:auto;">
        <img class="img-responsive" style="text-align:center;" src="http://55.220.5.82:80/Students/2014_Q4/student_123343445434.png"></img>
      </div>
    </div>
  </div>
</div>

屏幕截图如下：

感谢。

Answer 1

尝试将此添加到您的css

.modal-dialog {
    width:auto;
}

<强>更新

.modal {
    text-align: center;
}
.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.modal-dialog{
    width:auto;
}

工作小提琴 http://jsfiddle.net/52VtD/9387/

Answer 2

http://jsfiddle.net/bqffdw57/5/

$('#myModal1').on('shown.bs.modal', function (e) {
    //get image width
    //+30 = padding left and right for .modal-body
    //+20 = the approximate width of the scrollbar
    var w=$('#img').width()+30+20;

    $('.modal-dialog').width(w);
})