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

【问题标题】：How to remove the white space on right side of an image in a Bootstrap modal?如何在 Bootstrap 模式中删除图像右侧的空白？
【发布时间】：2015-02-01 21:26:21
【问题描述】：

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

截图如下：

谢谢。

【问题讨论】：

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

标签： css image twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

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);
})

【讨论】：

【解决方案2】：

尝试将其添加到您的 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/

【讨论】：

@Gorostas 添加.modal-body{padding-right:30px} 修复左右填充