html - Bootstrap 左右边距到图像的边缘

Question

我想在容器内放置一张去除了左右边距的图片:

CSS:

.container{
    padding: 20px;
    background-color: #eee;
    max-width: 600px;
    min-height: 500px;
    margin: 20px auto;
}

  .full-size{
      margin-left: -20px;
      margin-right: -20px;
      width: 100%;
    }

html:

<div id="content" class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <img class="img-responsive full-size" src="http://placehold.it/900x500">
</div>

演示:http://www.bootply.com/0ElBn1DBBU

但我无法将图像设置为全尺寸和 0 边距。图像向左移动但不是全宽。

Answer 1

容器类的填充限制了它。我会制作一个名为 image-container 的单独类，并用它包装图像。那么边距就会产生影响。
<div class="image-container">
<img class="img-responsive full-size" src="http://placehold.it/900x500">
</div>

.image-container{
margin-left: -20px;
margin-right: -20px;
}


请参阅此处的示例。 http://www.bootply.com/661aOu5SKh

如果您还想删除底部填充，请添加 margin-bottom: -20px;