如何在角度管理響應式設計？

單擊添加按鈕時，靜態文本和文本框垂直添加。我該如何水平添加？如何使這種設計具有響應性？如何在角度管理響應式設計？

對於桌面/筆記本電腦：連續4個，平板電腦：3個連續，手機：連續1個。

附加了HTML，Java腳本和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>

來源

2016-06-24 Hiren Sahoo

Bootstrap is爲您的要求推薦的解決方案。 – Nhan