각도에서 반응 형 디자인을 관리하는 방법은 무엇입니까?

Question

추가 버튼을 클릭하는 동안 정적 텍스트와 텍스트 상자가 수직으로 추가됩니다. 어떻게 가로로 추가 할 수 있습니까? 어떻게이 디자인을 반응 적으로 만들 수 있습니까?

데스크톱/랩톱 : 행으로 4, 태블릿 : 3 행, 모바일 : 1 행.

HTML, 자바 스크립트 및 CSS 파일이 첨부되었습니다. 제발 제안 해주세요.

var app = angular.module('angularjs-starter', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    $scope.choices = [{id: 'choice1'}, {id: 'choice2'}]; 
 

 
    $scope.addNewChoice = function() { 
 
    var newItemNo = $scope.choices.length + 1; 
 
    $scope.choices.push({'id': 'choice' + newItemNo}); 
 
    }; 
 

 
    $scope.removeChoice = function() { 
 
    var lastItem = $scope.choices.length - 1; 
 
    $scope.choices.splice(lastItem); 
 
    }; 
 

 
});

fieldset { 
 
    background: #FCFCFC; 
 
    padding: 16px; 
 
    border: 1px solid #D5D5D5; 
 
} 
 
.addfields { 
 
    margin: 10px 0; 
 
} 
 

 
#choicesDisplay { 
 
    padding: 10px; 
 
    background: rgb(227, 250, 227); 
 
    border: 1px solid rgb(171, 239, 171); 
 
    color: rgb(9, 56, 9); 
 
} 
 
.remove { 
 
    background: #C76868; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
    font-size: 21px; 
 
    border: 0; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding: 4px 9px; 
 
    vertical-align: top; 
 
    line-height: 100%; 
 
} 
 

 
input[type="text"], 
 
select { 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
 

 
<div ng-app="angularjs-starter" ng-controller="MainCtrl"> 
 
    <fieldset data-ng-repeat="choice in choices"> 
 
    <select> 
 
     <option>Mobile</option> 
 
     <option>Office</option> 
 
     <option>Home</option> 
 
    </select> 
 
    <input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number"> 
 
    <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> 
 
    </fieldset> 
 
    <button class="addfields" ng-click="addNewChoice()">Add fields</button> 
 

 
    <div id="choicesDisplay"> 
 
    {{ choices }} 
 
    </div> 
 
</div>

는 반응 사용해야하는 결정을위한

Answer 1

Angular Material 또는 Bootstrap

Answer 2

당신은 부트 스트랩 그리드 (사용할 수있는 수는 적절한 .row의이 없을 것이기 때문에 비록 밖으로 다른 방법으로 버그 이 방법으로 열을 추가 할 때) 또는 flexbox를 사용하여 수동으로 요구 사항을 간단하게 작성할 수 있습니다. https://css-tricks.com/dont-overthink-flexbox-grids/