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;

Answer 2

将padding: 20px;课程的.container替换为padding: 0;，并从margin-left: -20px;课程中删除margin-right: -20px;和.full-size。

以下是这些修改后CSS的样子：

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

      padding: 0;
  }

和

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

示例：http://www.bootply.com/Yuz0rsCbLV

Answer 3

容器上的20px填充物引起了所有的悲伤。如果从容器类中删除它，则根本不需要任何完整大小的类。要改善文本的外观，请在容器内的p标记中添加填充：

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

.container p {
  padding: 20px;
}

.full-size{

}

引导左右边距到图像的边缘

3 个答案: