점보 트론 높이 및 부동

Question

im/ct/html과 부트 스트랩 자체에 새로운 종류입니다. 두 가지 문제가 발생했습니다.

하나는 다음과 같습니다. 세 번째 및 네 번째 상자 높이를 100 %로 수정하려고하지만 어떤 div가 아니거나 클래스 i가 100 %로 변경되지 않아 변경되지 않습니다.

두 번째 : Box4를 box2 아래에 놓을 수있는 방법은 무엇입니까? 문제를 설명하기 위해

링크 : 시작 여기 http://oi62.tinypic.com/osqule.jpg

<div id="content"> 
    <div class="jumbotron"> 
     <div class="container-fluid"> 
      <h1>Join now!</h1> 
      <p>To get full use of the website, register now!.</p> 
      <a href="#" class="btn btn-primary btn-lg" role="button">Sign up</a> 
     </div> 
    </div> 
    <div class="bordertop"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Box2</h1> 
       <p>text</p> 
      </div> 
     </div> 
    </div> 
    <div class="box3"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Box3</h1> 
       <p>text</p> 
      </div> 
     </div> 
    </div> 
    <div class="box4"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Box4</h1> 
       <p>text</p> 
      </div> 
     </div> 
    </div> 
     </div> 
#content > div { 
float:left; 
width:49%; 
} 
#content > div.bordertop { 
    float:right; 
    width:49%; 
} 
#content > div.box3 { 
    clear:both; 
    width:49%; 
    float:left; 
} 
#content > div.box4 { 
    float:right; 
    width:49%; 
} 

Answer 1

것 : http://jsfiddle.net/jPZLd/11/

내가 상자 2와 3을 교환했습니다 여기 http://jsfiddle.net/BXZrX/6/

와 내가 원하는의 사진입니다 페이지 아래로 올바르게 흐르게됩니다.

<div id="content"> 
    <div class="column"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Join now!</h1> 
       <p>To get full use of the website, register now!.</p> 
       <a href="#" class="btn btn-primary btn-lg" role="button">Sign up</a> 
      </div> 
     </div> 
     <div class="bordertop"> 
      <div class="jumbotron"> 
       <div class="container-fluid"> 
        <h1>Box2</h1> 
        <p>text</p> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="column"> 
     <div class="box3"> 
      <div class="jumbotron"> 
       <div class="container-fluid"> 
        <h1>Box3</h1> 
        <p>text</p> 
       </div> 
      </div> 
     </div> 
     <div class="box4"> 
      <div class="jumbotron"> 
       <div class="container-fluid"> 
        <h1>Box4</h1> 
        <p>text</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="footer"> 
    Footer 

     </div> 

상자 2와 상자 4가 모두 동일한 기준선을 필요로하는 경우 콘텐츠가 정적 인 경우 간단합니다. 예를 들어 더 짧은 상자의 높이를 수동으로 조정하십시오.

.box4 .jumbotron { 
    height: 319px; 
} 

동적 콘텐츠를 처리해야하는 경우 조금 더 어려워집니다. 컨테이너 요소에 배경색을 적용하고보고 싶지 않은 비트를 숨겨서 가짜로 만들 필요가 있다고 생각합니다.