Наэта страница из документации по 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>

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

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

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

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