Блог

Я использую 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 media query.

При чтении документа вы можете найти подходящие медиа-запросы, которые вам нужны для каждого устройства.

Css:

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

JS Fiddle