Как исправить странные смещения в столбцах начальной загрузки

Question

Как сделать мои снимки центрированными по центру, когда экран сжимается до малого, чтобы держать их рядом друг с другом? Я пробовал использовать столбцы, но он имеет странное смещение, и он не будет стрелять в сторону или выровнять по прямой колонке, когда это необходимо. Вот мой код:

    <h2 class="text-center h2">Recent Projects</h2> 

       </div> 
       <div class="pics col-md-4 col-md-offset-2 col-xs-10 col-xs-offset-1"> 

        <a href="350_project.html"> 
         <img src="images/IMG_2579.JPG" width="450" height="350"> 
        </a> 

        <h3 class="text-center">350 Project</h3> 

       </div> 
       <div class="pics col-md-6 col-md-offset-1 col-xs-10 col-xs-offset-1"> 

        <a href="silk_screening.html"> 
         <img src="images/IMG_0978.JPG" width="450" height="350"> 

        </a> 
        <h3 class="text-center">Silk Screening</h3>    

       </div> 
       <div class="pics col-md-4 col-md-offset-2 col-xs-10 col-xs-offset-1"> 

        <a href="compost.html"> 

         <img src="images/IMG_7793.JPG" width="450" height="350"> 

        </a> 
        <h3 class="text-center">Food Feud</h3> 

       </div> 
       <div class="pics col-md-6 col-md-offset-1 col-xs-10 col-xs-offset-1"> 

        <a href="terracycle.html"> 

         <img src="images/Official_TerraCycle_Logo.png" width="450" height="350"> 

        </a> 

        <h3 class="text-center">TerraCycle</h3> 
       </div> 

Answer 1

Вы можете использовать @media запросов, что делает ваш ДИВ иметь что-то вроде «маржинальной: авто» определенного размера экрана или с глобальным родительским DIV с «выравнивания текста: центр ».

Не забывайте, что элемент сетки начальной загрузки имеет атрибут «float: left» по умолчанию, возможно, вам придется изменить его с помощью запросов @media.

Я использовал его в своем последнем проекте. Я не знаю, что мои цели совместимы с вашими, но это может вам помочь.

<div class="container_losange container_losange_mission col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div> 
<div class="container_losange container_losange_mission float-right col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div> 
<div class="container_losange container_losange_mission col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div> 
<div class="clear"></div> 
<div class="container_losange container_losange_mission float_none float-right col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div> 
<div class="container_losange container_losange_mission float_none float-left col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div> 

Тогда у меня есть 3 + 2 divs. В 2 последних дивы являются центром страницы, потому что я сделать некоторые изменения:

.section_mission { 
     text-align: center; 

     .container_losange_mission { 
     display: inline-block; 

     &.float_none { 
      float: none; 
     } 
    } 

флоат-направо и налево плавать-только здесь для конкретной конструкции мобильного зрения. (иметь «ступенчатую» структуру) Ясный div, кажется, не нужен, я не помню, почему я его использовал.

/* Extra small devices (Phones (<768px)) */ 
@media(max-width:767px){ 
    .section_mission { 
     .container_losange_mission.float-right { float: right !important; } 
     .container_losange_mission.float-left { float: left !important; } 
    } 
} 

Я не знаю, если мои экспликации являются полезными для вас, потому что я не уверен, что это работает со случайным числом элементов ..

---

Если нет, посмотри на CSS3 новый functionnality FLEX: http://the-echoplex.net/flexyboxes/ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html Может быть полезно на этом типе проблемы