如何使用Bootstrap在英雄单元中显示缩略图？
在 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 »</a></p>
</div>
这几乎有效，但缩略图和文本之间没有间隙：
此外，图像溢出了 hero-unit div。我意识到我可以通过一些内联样式来解决这两个问题：
<div class="hero-unit" style="overflow: auto;">
...
<div class="thumbnail span3" style="margin-right: 20px;">
但是，内联样式确实并不理想，我犹豫是否通过编辑 bootstrap.css 在站点范围内应用它。有更好的办法吗？我确信以前有人遇到过这个问题。
On this page of the Bootstrap documentation, an example is provided demonstrating the "hero unit" which typically is placed at the top of a page and announces something important. I am trying to incorporate this into a page but I would like to also display a thumbnail beside it. Here is what I have:
<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 »</a></p>
</div>
This almost works but there is no gap between the thumbnail and the text:
Also, the image is overflowing the hero-unit div. I realize I can fix both issues with some inline styling:
<div class="hero-unit" style="overflow: auto;">
...
<div class="thumbnail span3" style="margin-right: 20px;">
However, inline styling really isn't ideal and I am hesitant to apply it site-wide by editing bootstrap.css. Is there a better way? I'm sure someone has run into this before.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以嵌套网格元素。因此，只需在英雄单元内添加另一个
（或），然后添加两个块，其占整体网格列单位的适当百分比。将图像放在左栏中，将文本放在右栏中。
You can nest grid elements. So just add another
<div class="row-fluid">(or<div class="row">) inside the hero unit, and then add two<div class="span...">blocks with the appropriate percent of the overall grid column units.Put the image in the left column, and the text in the right.