Làm thế nào để hiển thị hình thu nhỏ trong đơn vị anh hùng bằng Bootstrap?

Question

Trên this page tài liệu Bootstrap, một ví dụ được cung cấp thể hiện "đơn vị anh hùng" thường được đặt ở đầu trang và thông báo điều gì đó quan trọng. Tôi đang cố gắng kết hợp điều này vào một trang nhưng tôi cũng muốn hiển thị hình thu nhỏ bên cạnh trang đó. Dưới đây là những gì tôi có:

<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> 

này gần công trình nhưng không có khoảng cách giữa các thumbnail và các văn bản:

Ngoài ra, hình ảnh được tràn các hero-unit div . Tôi nhận ra tôi có thể sửa chữa tất cả các vấn đề với một số kiểu nội tuyến:

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

Tuy nhiên, kiểu nội tuyến thực sự không phải là lý tưởng và tôi do dự để áp dụng nó trang web rộng bằng cách chỉnh sửa bootstrap.css. Có cách nào tốt hơn? Tôi chắc chắn rằng ai đó đã chạy vào điều này trước đây.

Answer 1

Bạn có thể lồng các phần tử lưới. Vì vậy, chỉ cần thêm một <div class="row-fluid"> (hoặc <div class="row">) bên trong đơn vị anh hùng, và sau đó thêm hai khối <div class="span..."> với phần trăm thích hợp của các đơn vị cột lưới tổng thể.

Đặt hình ảnh ở cột bên trái và văn bản ở bên phải.