html - 如何将小图片列表的方向从大型桌面的一列更改为电话上的一行？

我使用Bootstrap并为大型台式机和电话制作响应式视图。

这是我的行部分：

<div class="row-fluid section2">
    <div class="span3 offset1 asset">
      <img class="img-polaroid"  alt="Placeholder" src="http://placehold.it/240x300">
    </div>
    <div class="span7 asset copy">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu
        mollis justo velit at nunc. Fusce nec egestas sem. Donec
        fringilla ante lectus, a pellentesque lacus dignissim ac. Sed
        volutpat lorem ut congue malesuada. In facilisis scelerisque
        turpis sed lacinia. Donec in orci lectus. Donec auctor semper
        quam, eget rhoncus purus fringilla id. Phasellus id nibh eu
        risus ultrices adipiscing.  Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Donec porta, dui sagittis hendrerit
        rutrum, nunc leo tempus nisl, eu mollis justo velit at
      </p>
    </div>
<div class="span1 asset">
  <div class="row-fluid">
         <img class="img-polaroid"  alt="Placeholder" src="http://placehold.it/50x50">
  </div>
  <div class="row-fluid">
         <img class="img-polaroid"  alt="Placeholder" src="http://placehold.it/50x50">
      </div>
  <div class="row-fluid">
         <img class="img-polaroid"  alt="Placeholder" src="http://placehold.it/50x50">
      </div>
  <div class="row-fluid">
         <img class="img-polaroid"  alt="Placeholder" src="http://placehold.it/50x50">
      </div>
    </div>
  </div>

在大型桌面上的Chrome中看起来像这样：


但是手机的状况并不好，看起来像这样：


您会注意到，较小的50X50图片仍然位于一列中，看起来并不好。

如何将我的四张50X50图片从一列用于大型台式机旋转到一排在手机上？

最佳答案

这是一种方法：您可以使用CSS媒体查询进行播放。

在阅读doc时，您可以找到每个设备所需的优质媒体查询。

CSS：

@media (max-width: 767px){
    .asset .row-fluid{
        float:left;
        width:auto;
    }
}

JS Fiddle

关于html - 如何将小图片列表的方向从大型桌面的一列更改为电话上的一行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24266183/