부트 스트랩으로 영웅 유닛에 미리보기 이미지를 표시하는 방법은 무엇입니까?

부트 스트랩 문서의 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>

이 거의 작동하지만 썸네일과 텍스트 사이에 틈이 없다 : 또한 enter image description here

는 이미지가 hero-unit 사업부를 넘쳐은 . 나는 약간의 인라인 스타일로 모두 문제를 해결할 수 있습니다 실현 :

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

그러나, 인라인 스타일이 정말 좋지 않은 내가 bootstrap.css을 편집하여 사이트 전체에 적용 주저입니다. 더 좋은 방법이 있습니까? 나는 누군가가 전에 이것에 부딪쳤을 것이라고 확신한다.

출처

2012-02-22 Nathan Osman

격자 요소를 중첩 할 수 있습니다. 영웅 유닛에 다른 <div class="row-fluid"> (또는 <div class="row">)을 추가 한 다음 두 개의 <div class="span..."> 블록을 전체 그리드 열 단위의 적절한 비율로 추가하십시오.

이미지를 왼쪽 열에 넣고 텍스트를 오른쪽에 넣습니다.

출처

2012-02-22 03:21:16

답변에 따라 [this HTML] (http://paste.ubuntu.com/852178/)을 얻었지만 축소판과 텍스트를 별도의 줄에 표시하고 있습니다. –

그 발췌 문장은 내 대답을 기반으로하지 않습니다. 행 div는 어디 있습니까? –

행 div가'hero-unit' 또는'container-fluid' div 안에 있습니까? 어느 쪽도 효과가없는 것 같습니다. ** 편집 : ** 잠깐만 ... 나는 내가 뭘 잘못했는지 알 것 같아. ... –

부트 스트랩으로 영웅 유닛에 미리보기 이미지를 표시하는 방법은 무엇입니까?

답변

관련 문제