cases à cocher alignement vertical central en utilisant angulaire, bootstrap

Question

J'essaye de centrer aligner mes cases à cocher, quand vous ajoutez une nouvelle entrée c'est comment ils sont affichés maintenant: checkboxes not aligned well. C'est le code que je utilise (angulaire et d'amorçage):

<div class="container text-center"> 
<form ng-submit="todoAdd()"> 
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New"> 
    <input type="submit" class="btn btn-success" value="Add New"> 
</form> 

<br> 

<div ng-repeat="x in todoList"> 
    <input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span> 
</div> 

<p><button ng-click="remove()">Remove marked</button></p> 
</div> 
<script> 
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) { 
    $scope.todoList = [{todoText:'Clean House', done:false}]; 

    $scope.todoAdd = function() { 
     $scope.todoList.push({todoText:$scope.todoInput, done:false}); 
     $scope.todoInput = ""; 
    }; 

    $scope.remove = function() { 
     var oldList = $scope.todoList; 
     $scope.todoList = []; 
     angular.forEach(oldList, function(x) { 
      if (!x.done) $scope.todoList.push(x); 
     }); 
    }; 
}); 
</script> 

Je me demande est-il un moyen d'aligner les cases verticalement (au centre de la page) peut-être avec amorçage ou toute autre suggestion serait utile? C'est ma première question donc je m'excuse d'avance si ce n'est pas bien formulé, et je vous remercie d'avance pour les réponses!

Answer 1

Ceci est un sujet pur css, vous devez utiliser un FlexBox:

<div ng-repeat="x in todoList" style="display: flex; flex-direction: row; align-items: center"> 
<input type="checkbox" ng-model="x.done"> <span style="flex: 1" ng-bind="x.todoText"></span> 
</div> 

ou dans les classes:

.flex-container { 
display: flex; 
flex-direction: row; 
align-items: center; 
} 

.flex-fill { 
flex: 1; 
} 

et mettre le conteneur à la div de répétition, et la classe de remplissage sur la étiquette. fyi: flex: 1 signifie que l'élément doit remplir la largeur restante du conteneur. (J'espère que le code ci-dessus a une syntaxe correcte)

En bootstrap il devrait être quelque chose comme:

<div ng-repeat="x in todoList" class="form-group"> 
    <label class="control-label" ng-bind="x.todoText"> 
     <input class="form-control" type="checkbox" ng-model="x.done"> 
    </label> 
</div> 

mais je ne suis pas tout à fait sûr que ce soit un bon 100%