Css 如何在引导模式中删除图像右侧的空白？

我正在为我的网站使用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>

×
接近
回扣收据

屏幕截图附在下面：

---

谢谢。

尝试将此添加到您的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;
}

工作小提琴

---

检查是否为图像设置了宽度。@anpsmn：我没有设置图像的宽度。但是引导模式对话框从引导css中获取479px的宽度。@Gorostas添加

.modal body{padding right:30px}

以修复左右填充

$('#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);
})