Bootstrap 13-й столбец отображается вертикально

Question

Я сделал ряд из 100 столбцов, каждый из которых должен быть как можно меньше.Но, как вы можете видеть ниже, 13-я колонка ведет себя странно.все изображения и столбцы создаются с использованием одного и того же кода, поэтому каждая высота должна быть одинаковой.Я знаю правило 12 столбцов для начальной загрузки, но я в порядке, когда оно переходит на 12 или 40. У меня нет правила ширины в приложении.Кроме того, если кто-то может помочь, изображения будут отзывчивыми, но количество столбцов не будет, если я уменьшу окно, оно перейдет прямо к одному столбцу в строке вместо, скажем, 11, а затем 10 и т. Д. И т. Д.

<div class="form-horizontal container" id="ActualHallOfLights">
  <div class="row">
    <div class="thumbnail col-sm-1"> 1:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 2:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 3:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 4:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 5:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 6:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 7:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 8:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 9:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 10:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 11:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 12:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 13:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 14:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 15:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
  </div>
</div>

Answer 1

Как я вижу на изображении, LightBulbOff и LightBulbOn изображение имеют небольшую разницу в высоте.Высота обоих изображений должна иметь одинаковый размер.Или вы можете использовать clearfix класс после каждого 12-го изображения.

Answer 2

удалил тег изображения и добавил эти стили в div, содержащий изображение

.bgLightOn {
    background-image: url('/Images/LightBulbOn.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    width: 70px;
    height: 110px;
}

Answer 3

Ваши изображения, вероятно, немного различаются по высоте, возможно из-за субпиксельного округления.По этой причине элементы столбцов, которые их содержат, также различаются.Это нарушает поведение поплавка.

Одним из распространенных решений является установка минимальной высоты для столбцов (или изображений).Другой вариант - вместо этого установить изображения в качестве фона размером cover и использовать реагирующий элемент для установки высоты.Вы можете быть уверены, что все ваши изображения имеют одинаковый исходный размер, но это хрупкий подход.Даже одно неверное изображение нарушает макет.

В любом случае все они должны быть одинаковой высоты.