チェックボックス角度のあるブーツストラップを使用した中央の垂直アライメント

Question

私は自分のチェックボックスを中央に揃えようとしています。新しい入力を追加すると、これは今表示されている方法です： checkboxes not aligned well。多分、ブートストラップまたはだろう任意の他の提案で、私は疑問に思って

<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> 

（ページの中央に）垂直ボックスを整合させるどのような方法がある： これは私が使用していたコード（角とブートストラップ）です役に立った？これは私の最初の質問ですので、事前に謝罪してください。正式に策定されていない場合は、事前にお返事ありがとうございます！

Answer 1

これは純粋なCSSのトピックで、あなたはフレキシボックスを使用する必要があります

<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> 

やクラスで：

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

.flex-fill { 
flex: 1; 
} 

を繰り返しdivの、と上のフィルクラスにコンテナを設定しますラベル。 fyi：flex：1は、要素がコンテナの残りの幅を埋めることを意味します。 （私は上記のコードは、適切な構文を持っている願っています）

ブートストラップでは、のようなものでなければなりません：

<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> 

が、これは100％正しい

であれば、私はかなりよく分かりません