Bootstrap 13-й столбец отображается вертикально
Я сделал строку из 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>
Ответы 3
Ваши изображения, вероятно, немного различаются по высоте, возможно, из-за округления субпикселей. По этой причине элементы столбцов, которые их содержат, также различаются. Это нарушает поведение поплавка.
Одним из распространенных решений является установка минимальной высоты столбцов (или изображений). Другой вариант — вместо этого установить изображения в качестве фона с размером cover и использовать адаптивный элемент для установки высоты. Вы можете просто быть уверены, что все ваши изображения имеют одинаковый исходный размер, но это ненадежный подход. Даже одно неудачное изображение ломает макет.
В любом случае, все они должны быть одинаковой высоты.
Я установил для всех изображений статическую высоту, но это все равно не сработало, поэтому я последовал вашему совету и удалил тег изображения, сделал фон <div> изображением и добавил немного CSS, чтобы оно выглядело правильно. спасибо, это сработало.
Как я вижу на изображении, изображения LightBulbOff и LightBulbOn имеют небольшую разницу в высоте. Высота обоих изображений должна быть одинаковой. Или вы можете использовать класс clearfix после каждого 12-го изображения.
удалил тег изображения и добавил эти стили в div, содержащий изображение
.bgLightOn {
background-image: url('/Images/LightBulbOn.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
width: 70px;
height: 110px;
}
Было бы здорово, если бы вы могли использовать Фрагменты стека и включить ссылку на загрузочный CSS-файл той версии, которую вы используете.