부트 스트랩을위한 그리드 레이아웃

Question

내 컬럼을 특정한 방식으로 스타일링하는 데 어려움을 겪고 있습니다. 나는 2 개의 열에 각각 같은 크기의 2 개의 열을 포함하고있다.

A B C D

내가 옆에 두 행을 포괄하는 더 이상 열을 추가하기로하고 있습니다.

A B C D E E E 두 행의 동일한 길이를 갖는

. 나는 두 div를 분리 해보고 각면을 아무런 쓸모없는쪽으로 떠 다녔다. 내 코드 :

.announcements{ 
 
\t width: 300px; 
 
\t height: 500px; 
 
\t background: #FFFFFF; 
 
\t box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08); 
 
\t float: right; 
 
} 
 

 
.btn-links{ 
 
\t width: 300px; 
 
\t height: 160px; 
 
\t background: #FFFFFF; 
 
\t box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08); 
 
\t border-radius: 5px; 
 
}

<div class="container-fluid bg-content"> 
 
     <div class="content"> 
 
     <div class="content-heading"> 
 
      <h1> Welcome, </h1> <!--Name of user--> 
 
      <h4> What do you want to do today? </h4> 
 
     </div> 
 
     <div class="quick-links"> 
 
      <div class="row"> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      <div class="panel announcements"> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <button class="btn-links"></button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

그러나,이 코드는 생성합니다

ABCD있는 사각형 상자, E는 오른쪽에 긴 열 것. 어떻게하면 왼쪽에 더 많은 사각형 상자를 넣을 수 있으며 오른쪽 패널은 옆에 떠있는 상태로 고정시킬 수 있습니까? 미리 감사드립니다.

Answer 1

원하는 것은 다음과 같습니다. this fiddle에서 확인할 수 있습니다. 그러나 창 크기가 4/12의 MD 크기가 오른쪽에 맞는지 확인하십시오. 그렇지 않으면 반응성으로 인해 아래쪽으로 떨어집니다. 당신이 작은 크기에 맞는에 남아 있도록를 확인하려면 , 당신은 ... COL-SM ...와 ... COL-MD를 교체하거나 COL-SM을 추가 할 것

<div class="container-fluid bg-content"> 
    <div class="content"> 
    <div class="content-heading"> 
     <h1> Welcome, </h1> <!--Name of user--> 
     <h4> What do you want to do today? </h4> 
    </div> 
    <div class="quick-links"> 
     <div class="row"> 
     <div class="col-md-8"> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
      <div class="col-md-6"> 
      <button class="btn-links"></button> 
      </div> 
     </div> 
     <div class="col-md-4 panel announcements"> 
     hello there 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

외부에서 이동하십시오. 먼저 행의 8/12 인 한 div와 패널 공지 사항의 4/12 인 다른 div가 포함 된 행이 있습니다. 그런 다음 처음 8/12 div 내에 두 행이 있고 각 행마다 각각 6/12의 공간이있는 div가 두 개 있습니다.