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

Question

我使用 Bootstrap 并打算为大型桌面和手机制作响应式 View 。

这是我的行部分:

<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 图片从大型桌面的一列旋转到手机的一行？

Answer 1

这是一种方法:您可以使用 Css 媒体查询。

在阅读doc您可以找到每个设备所需的良好媒体查询。

CSS:

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

JS Fiddle