如何使用 Bootstrap 在英雄单元中显示缩略图？

Question

在 Bootstrap 文档的this page 中，提供了一个示例来演示“英雄单元”，该单元通常放置在页面顶部并宣布一些重要的事情。我正在尝试将其合并到一个页面中，但我还想在它旁边显示一个缩略图。这是我所拥有的：

<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。我意识到我可以通过一些内联样式来解决这两个问题：

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

但是， 内联样式确实并不理想，我很犹豫是否通过编辑 bootstrap.css 在整个站点范围内应用它。有没有更好的办法？我敢肯定以前有人遇到过这种情况。

Answer 1

您可以嵌套网格元素。因此，只需在 hero 单元内添加另一个 <div class="row-fluid">（或 <div class="row">），然后添加两个具有适当百分比的整体网格列单元的 <div class="span..."> 块。

图片放在左边栏，文字放在右边。