Как отобразить миниатюру в герое юнита с помощью Bootstrap? - PullRequest
Новая
       19

Как отобразить миниатюру в герое юнита с помощью Bootstrap?

5 голосов
/ 22 февраля 2012

На на этой странице документации Bootstrap приведен пример, демонстрирующий «геройский отряд», который обычно располагается вверху страницы и объявляет о чем-то важном.Я пытаюсь включить это в страницу, но я хотел бы также отобразить миниатюру рядом с ней.Вот что у меня есть: 

<div class="hero-unit">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt="Sample Image">
  </div>
  <h1>Important Site Information</h1>
  <p>This paragraph contains important ... </p>
  <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

Это почти работает, но между пиктограммой и текстом нет промежутка:

enter image description here

Кроме того, изображение переполняет hero-unit div.Я понимаю, что могу исправить обе проблемы с помощью встроенного стиля: 

<div class="hero-unit" style="overflow: auto;">
...
<div class="thumbnail span3" style="margin-right: 20px;">

Однако встроенный стиль действительно не идеален, и я не решаюсь применить его для всего сайта, отредактировав bootstrap.css.Есть ли способ лучше?Я уверен, что кто-то сталкивался с этим раньше.

1 Ответ

9 голосов
/ 22 февраля 2012

Вы можете вкладывать элементы сетки.Так что просто добавьте еще один <div class="row-fluid"> (или <div class="row">) в единицу героя, а затем добавьте два блока <div class="span..."> с соответствующим процентом от общего количества единиц столбца сетки.

Поместите изображение в левый столбеци текст справа.

...