부트 스트랩에서 반응 형 디자인을 적용하는 방법은 무엇입니까?

Question

누구나 제안 할 수 있습니다. 데스크톱에서 최대 4div를 표시하고, 태블릿에서 3 개, 휴대 기기에서 1 개를 표시하는 데 어떻게 부트 스트랩을 적용 할 수 있습니까? 동적

추가 된 div :

상태 : 1. 바탕 화면 (연속 최대 4 명 div의) : 1 개 사업부가있을 것입니다 경우 바탕 화면에 대한 , 그것은 중앙 위치에 있어야하며 윈도우 폭을 커버해야 (100 %), 2div의 경우 창 너비는 50 % 및 50 %이어야하며 3div의 경우 창 너비는 33 %, 33 % 및 33 % 여야합니다. 마찬가지로 4가 추가되면 창 너비가 포함되어야합니다 (25 %, 25 %, 25 % 및 25 %).

어떻게 Angular.js에서 할 수 있습니까?

내가 여기 div.Code 조각에 대한 부트 스트랩 신청 한

,

<div class="col-xs-12 col-sm-6 col-md-3"> 

Answer 1

이 제안하세요?

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12"> 

는 현재 문서를 확인할 수 있습니다 https://getbootstrap.com/examples/grid/

Answer 2

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"> 
 
      <p>dhcsdh</p> 
 
     </div> 
 
       <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"> 
 
      <p>dhcsdh</p> 
 
     </div> 
 
       <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"> 
 
      <p>dhcsdh</p> 
 
     </div> 
 
       <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12"> 
 
      <p>dhcsdh</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>