Twitter Bootstrap : 아래쪽 이미지의 텍스트 정렬

내 페이지의 로고가 내 페이지에 있습니다. 높이가 약 250px입니다. 다음으로는 세 개의 텍스트 필드가 아래쪽으로 정렬되어 있습니다 (이미지와 함께). 필드는 번역 목적으로 영어, 프랑스어 및 독일어의 약어를 나타냅니다.Twitter Bootstrap : 아래쪽 이미지의 텍스트 정렬

나는 전체 bootstrap.css를 사용하여 게시물에 sugested으로 (두 줄을 추가 해요 :. align text/image/links within a grid하지만 여전히 작동되지 수

ENG 및 FRA에 대한

.fixedheight { height: 250px; position:relative; } 
.bottomaligned {position:absolute; bottom:0; }

하나 개 추가 CSS 라인

.bottomaligned2 {position:static; bottom:0; }

HTML 코드는 다음과 같습니다

이

<body> 
<div class="container"> 
    <div class="row fixedheight"> 
     <div class="span3 offset4"> 
      <img src="./images/logo.jpg" alt="Logo"> 
     </div><!-- /span --> 
     <div class="span1 bottomaligned"> 
      NED 
     </div><!-- /span --> 
     <div class="span1 bottomaligned2"> 
      ENG 
     </div><!-- /span --> 
     <div class="span1 bottomaligned2"> 
      FRA 
     </div><!-- /span --> 
    </div><!-- /row --> 
</div><!-- /container --> 
</body>

누군가가 리에서 날 포인트 이 일을 끝내려면 어떻게해야할까요?
감사합니다,

출처

2012-07-02 user1037763

'작동하지 못할 때'라고 말하면 무엇을합니까? – DaveP

제시된 코드는 왼쪽 구석 NED와 중간 (조금 더 높음)의 이미지를 보여줍니다. 오른쪽에 ENG와 FRA가 있습니다. – user1037763

위의'position : static' 만 나타났습니다. From from http://www.barelyfitz.com/screencast/html-training/css/positioning/ "모든 요소의 기본 위치는 position : static입니다. 이는 요소가 배치되지 않고 문서에서 일반적으로 위치하는 곳에서 발생한다는 것을 의미합니다. 이전에 설정 한 위치 지정을 무시해야 할 필요가 없다면 일반적으로 이것을 지정하지 않을 것입니다. " 당신은'position : absolute'을 사용하지 않아야합니까? – DaveP

거트 마지막으로 몇 번의 실험 후 솔루션 및 @DaveP의 힌트를 발견했다.

새로운 CSS 코드 :

.fixedheight { height: 250px; position:relative; } 
.bottomaligned {position:relative; top:80%; height:10em; margin-top:-5em}

이 알아서 트위터 부트 스트랩에서 div의 같은 position:absolute를 선택할 필요가 없습니다.

html로 : 지금은

<body> 
<div class="container"> 
    <div class="row fixedheight"> 
     <div class="span3 offset4"> 
      <img src="./images/logo.jpg" alt="Logo"> 
     </div><!-- /span --> 
     <div class="bottomaligned"> 
     <div class="span1"> 
      ENG       
     </div><!-- /span --> 
     <div class="span1"> 
      NED 
     </div><!-- /span --> 
     <div class="span1"> 
      FRA 
     </div><!-- /span --> 
     </div> 
    </div><!-- /row --> 
</div><!-- /container --> 
</body>

이

텍스트가 거의 이미지의 오른쪽 하단에 정렬과 5 열에서 시작하는 나에게 이미지를 제공합니다.

출처

2012-07-02 20:05:23 user1037763

Twitter Bootstrap : 아래쪽 이미지의 텍스트 정렬

답변

관련 문제