2015-10-22 5 views
0

У меня есть основной миниатюрный дисплей с использованием бутстрапа. Я хочу иметь 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; 
} 
+0

вы пробовали уменьшения отступы? его действительно трудно сказать, не зная, насколько широка '.work' (это вся ширина страницы или ограничивается контейнером?), а также насколько широкие изображения – chiliNUT

+0

да, я пробовал это без прокладки, и это не так, t fix it – QBuno

+1

Вы не можете добавить к нему маржу, не отбрасывая ее на следующую строку. Бутстрап настроен так, что столбцы занимают ровно 100% ширины контейнера. Вы используете три элемента с четырьмя столбцами, которые занимают 100% -ную ширину, добавив любой запас к этим divs, чтобы сделать его более 100%. – APAD1

ответ

1

Я не 100%, если это то, что вы имеете в виду, но здесь идет:

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

.thumbnail { 
    border:0; 
} 
.thumbnail a{ 
    display:block; 
    padding:10px; 
    background:red; 
} 
.thumbnail img{ 
    width:100%; 
} 

https://jsfiddle.net/ax7wcLo4/2

+0

Зачем использовать 'display: inline-block', когда классы' col-'уже устанавливают их float слева друг на друга? –

+0

@FarzadYZ Правда, что. Благодарю. Обновлено. – Baruch

+0

Казалось, это трюк. Благодаря! – QBuno

0

Если вы действительно хотите, чтобы отделить li элементы, вы должны сделать это без системы сетки по умолчанию Bootstrap в.

<ul class="list-unstyled list-inline"> 

.list-inline Использование класса на м е ul элемент и установить ниже CSS для них;

ul { 
    margin: 0; 
    padding: 0; 
    width: 100% 
} 
li { 
    width: calc(100% - 10px); 
    margin: 0 5px; 
} 

Be Aware: calc имеет некоторые проблемы совместимости на основе вашего диапазона поддержки браузера. Can I Use Link for CALC

0

Вы должны положить thumbnail внутри column, не комбинированный. Если вам нужно это внутри списка, это также может быть изменено на это> См. Default Bootstrap Example.

См. Рабочий фрагмент на полной странице.

body, 
 
html { 
 
    padding-top: 50px; 
 
} 
 
.row.no-list-style { 
 
    list-style: none; 
 
    margin-left: -55px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h3>Default</h3> 
 

 
    <div class="row"> 
 
    <div class="col-sm-4 col-xs-6"> 
 
     <div class="thumbnail"> 
 
     <a href="#honey"> 
 
      <img src="http://placehold.it/350x350/f00" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-6"> 
 
     <div class="thumbnail"> 
 
     <a href="#honey"> 
 
      <img src="http://placehold.it/350x350/000" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-6"> 
 
     <div class="thumbnail"> 
 
     <a href="#honey"> 
 
      <img src="http://placehold.it/350x350/f00" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h3>Inside a List</h3> 
 

 
    <ul class="row no-list-style"> 
 
    <li class="col-sm-4 col-xs-6"> 
 
     <div class="thumbnail"> 
 
     <a href="#honey"> 
 
      <img src="http://placehold.it/350x350/ff0" /> 
 
     </a> 
 

 
     </div> 
 
    </li> 
 
    <li class="col-sm-4 col-xs-6"> 
 
     <div class="thumbnail"> 
 
     <a href="#honey"> 
 
      <img src="http://placehold.it/350x350/000" /> 
 
     </a> 
 

 
     </div> 
 
    </li> 
 
    <li class="col-sm-4 col-xs-6"> 
 
     <div class="thumbnail"> 
 
     <a href="#honey"> 
 
      <img src="http://placehold.it/350x350/ff0" /> 
 
     </a> 
 

 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>