самозагрузки 3 отзывчивым разрыв сетки с изображениями

Question

Возможно, я что-то отсутствует или неправильно BS документацию, HTML ниже работ, как ожидается, если я буду использовать текст, а не изображения, как я поместить изображения он разбивает на хз и см.

По ожидать То есть: 1 ряд 8 колонок на> = мкр, 2 строки 4 колонки на см, 4 строки 2 колонки на хз.

На моих браузеров (Chrome/Firefox) поведение кажется:

• первая строка всегда правильно
• второй строки выравнивать первое изображение вправо и разорвать линию (перейти к следующей строке)

Любое предложение?

<div class="container"> 
      <div class="row"> 
       <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
        <img src="http://placehold.it/50x50" /> 
       </div> 
       <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
        <span class="stat-title">999</span><br />text 
       </div> 
       <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
        <img src="http://placehold.it/50x50" /> 
       </div> 
       <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
        <span class="stat-title">999</span><br />text 
       </div> 
       <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
        <img src="http://placehold.it/50x50" /> 
       </div> 
       <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
        <span class="stat-title">999</span><br />text 
       </div> 
       <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
        <img src="http://placehold.it/50x50" /> 
       </div> 
       <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
        <span class="stat-title">999</span><br />text 
       </div> 
      </div> 
     </div> 

Answer 1

я полагаю, что ее, так как высота вашей div s отличается. изображение равно 50px, в то время как текст немного меньше, поэтому, когда bootstrap помещает их в свои столбцы, он видит, что правый столбец меньше левого, поэтому он будет помещать следующее изображение (2-е) под 1-й текстовый блок.

Если вы делаете что-то подобное, он должен работать.

* в сущности, все, что вам нужно сделать, это убедиться, что Высоты div с равны

div.text-center{ 
 
    min-height: 50px; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
 
      <img src="http://placehold.it/50x50" /> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
 
      <span class="stat-title">999</span><br />text 
 
     </div> 
 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
 
      <img src="http://placehold.it/50x50" /> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
 
      <span class="stat-title">999</span><br />text 
 
     </div> 
 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
 
      <img src="http://placehold.it/50x50" /> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
 
      <span class="stat-title">999</span><br />text 
 
     </div> 
 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center"> 
 
      <img src="http://placehold.it/50x50" /> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center"> 
 
      <span class="stat-title">999</span><br />text 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Изображения, скорее всего, больше, чем их столбцы div контейнера. Попробуйте это:

img { max-width: 100% } 

Answer 3

Для того, чтобы сделать ваши изображения отзывчивыми, вам нужно использовать img-responsive класс.

<img class="img-responsive" src="http://placehold.it/50x50" />

См http://getbootstrap.com/css/#images

Answer 4

Я думаю, что я вижу, что вы испытываете. На самом деле это обычная проблема с BS. Что происходит в пятой колонке, есть комната под четвертой колонкой, чтобы сжать себя там. Вы можете добавить собственный класс в столбцы, чтобы установить минимальную высоту и принудительно спустить пятый столбец. Другими словами, поскольку новая строка явно не определена, любые столбцы, превышающие 12, будут сжиматься, где бы они ни находились. Вы можете обойти это, указав минимальную высоту в пользовательском классе, чтобы она соответствовала высоте вашего самого высокого элемента в строке.

Я думаю, что это то, что вы видите: https://jsfiddle.net/ejutc5bf/

Вот мое исправление:

HTML:

<divhttps://jsfiddle.net/DTcHh/#update class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center custom"> 
      <img src="http://placehold.it/50x50" /> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center custom"> 
      <span class="stat-title">999</span><br />text 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center custom"> 
      <img src="http://placehold.it/50x50" /> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center custom"> 
      <span class="stat-title">999</span><br />text 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center custom"> 
      <img src="http://placehold.it/50x50" /> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center custom"> 
      <span class="stat-title">999</span><br />text 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-1 text-center custom"> 
      <img src="http://placehold.it/50x50" /> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 text-center custom"> 
      <span class="stat-title">999</span><br />text 
     </div> 
    </div> 
</div> 

CSS:

.custom{ 
    min-height: 100px; 
} 

Fiddle

* Вероятно, вы захотите создать свой собственный класс и применить его к этому. Если вы примените его к ранее существующему классу (например, текстовому центру), он будет применяться ко всем этим классам, если и когда они будут использоваться в будущем.