У меня есть основной миниатюрный дисплей с использованием бутстрапа. Я хочу иметь 3 изображения подряд и спускаться до 2 изображений при уменьшении страницы. Я разработал это до тех пор, пока не добавлю margin-right, чтобы добавить некоторое пространство между эскизами. Как только я это сделал, он подтолкнул это третье изображение к следующей строке. Я пробовал играть с отступом и разметкой, и я просто не могу получить эту третью миниатюру, чтобы оставаться на одной линии. Я также попытался изменить его на col-sm-3, и это тоже не сработало.Как добавить пространство между эскизами без последнего эскиза, идущего на следующую строку?
HTML:
<div class="work">
<ul>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
</ul>
</div>
CSS:
.work {
padding: 0px 40px 0px 0px;
max-width: 100%;
}
.thumbnail {
margin-right: 10px;
}
вы пробовали уменьшения отступы? его действительно трудно сказать, не зная, насколько широка '.work' (это вся ширина страницы или ограничивается контейнером?), а также насколько широкие изображения – chiliNUT
да, я пробовал это без прокладки, и это не так, t fix it – QBuno
Вы не можете добавить к нему маржу, не отбрасывая ее на следующую строку. Бутстрап настроен так, что столбцы занимают ровно 100% ширины контейнера. Вы используете три элемента с четырьмя столбцами, которые занимают 100% -ную ширину, добавив любой запас к этим divs, чтобы сделать его более 100%. – APAD1