如何使用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

您可以嵌套网格元素。因此，只需在英雄单位中添加另一个<div class="row-fluid">（或<div class="row">），然后添加两个<div class="span...">块，其中包含整个网格列单位的相应百分比。

将图像放在左栏中，将文字放在右栏中。