만들기 평방 반응 상자

Question

MARKUP :

<div class="alumni"> 
    <div class="alumni-list col-xs-3"> 
     <div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}"> 
     </div> 
    </div> 
    <div class="alumni-list col-xs-3"> 
     <div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}"> 
     </div> 
    </div> 
    <div class="alumni-list col-xs-3"> 
     <div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}"> 
     </div> 
    </div> 
    <div class="alumni-list col-xs-3"> 
     <div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}"> 
     </div> 
    </div> 
</div> 

CSS ::

.alumni { 
max-height: 280px; 
padding: 10px; 
overflow: auto; 
} 
.alumni-list { 
text-align: center; 
margin-bottom: 10px; 
padding: 0px 5px; 
} 
.innerBg { 
height: 56px; 
max-width: 56px; 
background-size: cover; 
border-radius: 4px; 
background-position: center center !important; 
} 

동문 컨테이너 4 동문 목록이 포함되어 있습니다. 화면 크기에 관계없이 모든 동문 목록은 정사각형 모양이어야합니다. 이것은 내가 지금까지 뭘하려하고 나는 부트 스트랩 3를 사용하고

Answer 1

부트 스트랩 그리드 시스템은 4 종류가 있습니다

XS - 태블릿 (전화 미만 768px 와이드 화면)

SM을 (노트북 및 데스크탑 크거나보다 992px 와이드 스크린)

LG (- - - 크거나보다 768px 와이드 스크린)

MD (소형 노트북 크거나보다 1200 픽셀 와이드 스크린)

위의 클래스를 결합하여 더 동적이고 유연한 레이아웃을 만들 수 있습니다.

<div class="row"> 
 
    <div class="col-xs-6 col-md-3 col-lg-3"><div class="inner_square">square</div></div> 
 
    <div class="col-xs-6 col-md-3 col-lg-3"><div class="inner_square">square</div></div> 
 
    <div class="col-xs-6 col-md-3 col-lg-3"><div class="inner_square">square</div></div> 
 
    <div class="col-xs-6 col-md-3 col-lg-3"><div class="inner_square">square</div></div> 
 
</div>