html – 连续的我的缩略图不是并排的(而是堆叠在彼此的顶部)

2019年7月22日 160次阅读

所以我想做我认为非常基本的事情,有一排6个缩略图,可以在XS显示器上堆叠成两行3个缩略图.但由于某些原因,我的所有缩略图都堆叠在两列中.我相信我错过了一些明显的东西.

<div class="row">
<div class="col-xs-12 col-md-6">
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottagefront.png" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottagekitchen.png" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/backbonestateparktrail.jpg" alt="...">
    </a>

  </div>

<div class="col-xs-12 col-md-6">
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottagebed.png" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/backbonestatepark.jpg" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottageliving.png" alt="...">
    </a>
</div>
</div>

这看起来像这样：http://i.imgur.com/nWYmDMB.png

最佳答案 问题：

默认情况下,img充当块级元素并占据整个宽度空间.因此,在xs屏幕尺寸中,它占据宽度的100％,而在md屏幕尺寸模式下,它只占宽度的50％.

此外,锚标记不采用宽度值.在指定宽度之前,您需要包含display：block.修复其中一个问题可以导致解决方案.

解：

您需要更改标记.将缩略图包裹在网格类中而不是内联样式中.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>

</div>

<div class="row">
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
</div>
点赞