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

Question

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

<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...">使用适当百分比的整个网格列单元添加两个块.

将图像放在左列,将文本放在右侧.