Bootstrap 3 сломанной строки только на мобильных телефонах

У меня возникла проблема с загрузкой 3 и несколькими эскизами, где, хотя я использую один и тот же код, а размеры изображения точно такие же, что последняя строка изображения разбита на мобильных устройствах только в вертикальном режимеBootstrap 3 сломанной строки только на мобильных телефонах

Вот код:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="?service=4"> 
       <img class="img-responsive" src="http://mysite/tn-1_256x300.jpg" alt=""> 
       <div class="text-center text_margin">styling</div> 
      </a> 
     </div> 

     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="?service=5"> 
       <img class="img-responsive" src="http://mysite/tn-2_256x300.jpg" alt=""> 
       <div class="text-center text_margin">colour</div> 
      </a> 
     </div> 

     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="?service=6"> 
       <img class="img-responsive" src="http://mysite/tn-3_256x300.jpg" alt=""> 
       <div class="text-center text_margin">extensions</div> 
      </a> 
     </div> 

     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="?service=7"> 
       <img class="img-responsive" src="http://mysite/tn-4_256x300.jpg" alt=""> 
       <div class="text-center text_margin">hair enhancements</div> 
      </a> 
     </div> 

     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="?service=8"> 
       <img class="img-responsive" src="http://mysite/tn-5_256x300.jpg" alt=""> 
       <div class="text-center text_margin">smoothing treatment</div> 
      </a> 
     </div> 

     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="?service=9"> 
       <img class="img-responsive" src="http://mysite/tn-6_256x300.jpg" alt=""> 
       <div class="text-center text_margin">hair up</div> 
      </a> 
     </div> 

     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="meet-the-team"> 
       <img class="img-responsive" src="http://mysite/tn-7_256x300.jpg" alt=""> 
       <div class="text-center text_margin">meet the team</div> 
      </a> 
     </div> 

     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="/price-list/"> 
       <img class="img-responsive" src="http://mysite/tn-8_256x300.jpg" alt=""> 
       <div class="text-center text_margin">price list</div> 
      </a> 
     </div> 
    </div><!--end row--> 
</div><!--end container-->

источник

2015-06-12 Satch3000

Не у вас есть обивка или маржи ниже вашего «сглаживающего лечения» название? Кажется, очень близок разрыв плавающего выравнивания. –

Возможно, вы установили высоту для контейнеров изображений. Затем изображение с заголовком, занимающим 2 строки, выводит доступную высоту, которая приводит к тому, что контейнер изображения, подаваемый справа, сдвигается вправо. – user2755140

Я только что проверил его с помощью firebug, и похоже, что Wordpress автоматически дает ему высоту и ширину: o/ – Satch3000

-2

Проверьте текст рентабельности класс, при добавлении поля или отступов для некоторых элементов в Bootstrap, изменить ширину ваших колонок.

источник

2015-06-12 21:49:00

Я удалил каждый отдельный встроенный CSS, который я добавил, и текст по-прежнему отображается поверх миниатюры – Satch3000

Это происходит потому, что часть текста под эскизами обертывается, и в результате высоты эскизов различаются. Один из способов решить эту проблему, чтобы очистить столбцы плавать на мобильном телефоне с помощью CSS, как это ..

@media (max-width: 768px) { 
    .row > .col-xs-6:nth-child(2n+1) { 
     clear: left; 
    } 
}

Demo 1: http://codeply.com/go/Bgt8JFkPht

Другого варианта (проще), чтобы использовать CSS текст переполнение многоточия на текст DIV, так как именно эти DIVs вызывают разницу высоты на каждом миниатюре. Когда высота миниатюры одинаковы, то строка упаковка не является проблемой ..

Demo 2: http://codeply.com/go/5uOP4bM5pk

источник

2015-06-23 16:04:42 ZimSystem

Bootstrap 3 сломанной строки только на мобильных телефонах

ответ

Смежные вопросы