Как сделать так, чтобы содержимое внутри миниатюр Bootstrap3 стекало до самого края?

Question

Как сделать так, чтобы содержимое внутри миниатюр Bootstrap3 стекало до самого края?

0

См. Изображение ниже. Я хотел бы, чтобы контент расширялся до закругленных углов.

Обратите внимание, что это содержимое не просто изображение и может включать в себя наложение (.item-screen)

Разметка выглядит так:

<div class="col-sm-6">
  <div class="thumbnail">
    <div class="item-picture">
      <a href="blah">
        <img src="blah" class="img-responsive"/>
      </a>
      <div class="item-screen"></div>
    </div>
  <div class="caption">dark picture</div>
  ...
</div>

Kevin Davis 03 дек. 2013, в 12:47

Источник

1

Можете ли вы собрать Fiddle, чтобы мы могли видеть применяемый CSS? Я полностью ожидаю, что пробел заполнен, но это трудно определить по фрагменту HTML и скриншоту!
johnkavanagh 03 дек. 2013, в 10:53
0

Скрипка Олафа ниже в значительной степени покрывает это (спасибо!)
Kevin Davis 04 дек. 2013, в 00:09
0

Я не уверен, как заставить изображение закруглять углы, хотя
Kevin Davis 04 дек. 2013, в 00:09

Показать ещё 1 комментарий

Теги:

html

css

twitter-bootstrap-3

2 ответа

1

Когда вы собрали простой пример и используете некоторые инструменты браузера, вы увидите небольшое дополнение 4px применяемое к div.thumbnail. Чтобы увеличить изображение до границы, удалите это дополнение

div.thumbnail {
    padding: 0;
}

JSFiddle

Если вы хотите сохранить прописку внизу, вы можете сделать

div.thumbnail {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
}

и изображение с круглыми углами

<img src="..." class="img-rounded"/>

JSFiddle

Olaf Dietsche 03 дек. 2013, в 10:47

0

Да, это избавляет от отступов по бокам, но я бы хотел оставить этот отступ ниже, и мне нужно разбираться с углами
Kevin Davis 04 дек. 2013, в 00:00
0

Конечно, вы можете удалить прокладку выборочно.
Olaf Dietsche 05 дек. 2013, в 21:12

Ещё вопросы

Можете ли вы собрать Fiddle, чтобы мы могли видеть применяемый CSS? Я полностью ожидаю, что пробел заполнен, но это трудно определить по фрагменту HTML и скриншоту!
Скрипка Олафа ниже в значительной степени покрывает это (спасибо!)
Я не уверен, как заставить изображение закруглять углы, хотя
Да, это избавляет от отступов по бокам, но я бы хотел оставить этот отступ ниже, и мне нужно разбираться с углами
Конечно, вы можете удалить прокладку выборочно.

Kevin Davis · Accepted Answer · 2013-12-03T23-13-00.000Z

Принял еще один взгляд после того, как Олаф указал, что я могу удалить прокладку

Я закончил с применением следующего CSS:

.item a img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 0px solid transparent;
}
.item .thumbnail { padding: 0px; }

Раньше я пытался добавить радиус границы, но до тех пор, пока я не понял, что вы можете сделать прозрачную рамку, она выглядела потрясающе