连续的我的缩略图不是并排的（而是堆叠在彼此的顶部）

So I want to do what I thought was pretty basic, have a row of 6 thumbnails that would stack to two rows of 3 thumbnails on XS displays. But for some reason all of my thumbnails stack in two columns. I am sure I am missing something obvious here.

所以我想做我认为非常基本的事情，有一排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>

This looks like this: http://i.imgur.com/nWYmDMB.png

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

1 个解决方案

#1

Problem:

问题：

img by default act as block level element and occupy the full width space. So while in xs screen size, it occupies 100% of the width while in md screen size mode, it just occupies 50% of width.

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

Also, anchor tags do not take width values. You will need to include display: block before specifying width. Fixing either one of the problems can lead up to the solution.

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

Solution:

解：

You need to change your markup. Wrap the thumbnails inside a grid class instead of inline style.

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

<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>

#1