2013-04-14 3 views
4

내 페이지 상단에는 제목과 페이스 북 로고가 있습니다. 다음은 작동 예제입니다. fiddle부트 스트랩 인라인 요소

모든 것이 페이지 상단의 깔끔한 행에 있습니다. 그러나 로고와 텍스트 Join us on...이 오른쪽에 있고 표제가 그대로 있도록하고 싶습니다. 두 번째와 세 번째 <li> 요소에 class="pull-right"을 추가하려고 시도했습니다. like this. 그러나 이것이 실제로 어떻게 수직 배열을 망가 뜨리는지를 알 수 있습니다. 그것이 내가 바라는 방식 인 맞춤 이외의 것.

정렬을 수정하는 방법에 대한 아이디어가 있으십니까?

답변

4

당신은 li당겨 오른쪽을 적용 할 수 있습니다. 또한 H4는 휴식을 초래할 것이므로, H4 안에 img와 "Join Us ..."를 넣어야합니다.

이 시도 :

<ul class="inline"> 
    <li><h3 class="muted">Heading</h3></li> 
    <li class="pull-right"> 
    <div class="media"> 
     <h4 class="media-heading"> 
     <a href="#"> 
      <img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" /> 
     </a>  
     Join Us on Facebook 
     </h4> 
    </div> 
    </li> 
</ul> 
+0

세로 맞춤은 여전히 ​​약간 엉망입니다. – Richard

-1

다른 요소를 추가하고 "당겨 받기"클래스를 제공해야합니다. 귀하의 참여 코드는 그 안에 있어야합니다.

이렇게해야합니다.

<ul> 
    logo 
</ul> 
<ul class="pull-right"> 
    join us 
</ul> 
+0

이 확실히 작동하지 않았다, 그것은 새 행에 모든 것을 넣어. 3 개의 항목 (표제, 로고, 텍스트)이 모두 한 행에 있어야합니다. – Richard

관련 문제