Question

我有以下网格 - http://codepen.io/vmpen/pen/GqrXQz，其中必须保留纵横比，同时保持响应。没有填充网格行为正确。

  <div class="container">
  <div class="row-fluid">
    <div class="col-xs-3 grid-sizer"></div>
    <div class="text-center feature feature--full col-xs-12">
      <div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/1080x270"></div>
    </div>
    <div class="text-center feature feature--width2 col-md-6 col-sm-12">
      <div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/540x540"></div>
    </div>
    <div class="col-md-3 col-sm-6 feature">
      <div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
    </div>
    <div class="col-md-3 col-sm-6 feature">
      <div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
    </div>
    <div class="col-md-3 col-sm-6 feature">
      <div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
    </div>
    <div class="col-md-3 col-sm-6 feature">
      <div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
    </div>
    <div class="col-md-3 feature">
      <div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/270x540"></div>
    </div>
    <div class="col-md-3 feature">
      <div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
    </div>
    <div class="col-md-6 feature feature--width2">
      <div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/540x270"></div>
    </div>
    <div class="col-md-9 feature feature--width3 feature--width3">
      <div class="img-wrapper last"><img class="img-responsive" src="https://placehold.it/810x270"></div>
    </div>
  </div>
</div>

当填充项目时，图像的高度不会补偿填充，从而使网格不对齐。

我设法通过设置固定高度来解决这个问题，但这会破坏网格和宽高比的响应性。有人能指出一些完善的技术来解决这个问题。作为最后一点，我尝试了各种砌体解决方案无济于事。我的问题与此非常相似 - https://github.com/metafizzy/isotope/issues/877

Answer 1

我遇到了这个答案 - How to use border with Bootstrap

outline: #fff solid 10px;

它为图像周围的边框提供相同的效果，但在渲染容器时不会由浏览器计算。

图像网格（Bootstrap）并补偿边距

1 个答案: