Question

我的列中包含一个230x320占位符class='img-responsive'图片。图像为230x320，但列宽为col-md-3。

问题是图像宽度小于列宽，因此空间留在右侧。此外，当列更改为col-md-2时，图像会响应，从而显示小于230x320尺寸的图像。

有没有办法让这个列保持响应，但减少列的宽度，但保持右边的默认引导程序填充？

以下是这样的图像：

我已经添加了代码段代码，但是引导程序无法正常工作，也许我的链接不是他们想要的那样？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
<div class="row">
<div class-="col-md-12">
  <form>
    <div class="form-group">
      <label for="profilephoto" class="col-sm-2 control-label custom-label">Profile Photo</label>
      <div class="col-md-3 profile-img"><img src="http://placehold.it/230x320" alt="profile-img" class="img-rounded img-responsive"></div>
			<div class="col-md-3">
				<img src="http://placehold.it/130x130" alt="avatar" class="img-circle">
				<div class="caption">Avatar</div>
				<button type="button" class="btn btn-primary btn-md outline btn-block upload-btn">
        <span class="glyphicon glyphicon-plus"></span>Upload photo
        </button>
        </div>
    </div>
  </form>
</div>
</div>
</div>

＆＃13;

Answer 1

根据您的标记，Bootstrap的行为是合适的。来自img-responsive班 [link]上的Bootstrap文档：

这适用于max-width: 100%;，height: auto;和display: block; 到图像，以便它很好地缩放到父元素。

您需要的行为不是max-width: 100%;，而是width: 100%;，它会将图片缩放到父元素的整个宽度。

此codepen演示了覆盖，但在最终产品中，我建议在img代码中添加自定义CSS类。

Bootsrap列宽比图像宽

1 个答案: