変更私は、合計で10個のボタンを持って

Question

ごとに2つのボタン、どのように私はすべての2つのボタンの改行に移動することができます。

HTML：

<div ng-controller="SimpleArrayCtrl"> 
    <div class="form-group"> 
     <label ng-repeat="fruitName in fruits" class="checkbox-inline"> 
     <input type="checkbox" 
       name="selectedFruits[]" 
       value = {{fruitName}}"   
       ng-checked="selection.indexOf(fruitName) > -1" 
       ng-click="toggleSelection(fruitName)" 
      > {{fruitName}} 
     </label> 
    </div> 
</div> 

JSを：

(function (app) { 
'use strict'; 

app.controller('SimpleArrayCtrl', 
       ['$scope', function SimpleArrayCtrl($scope) { 
// fruits 
$scope.fruits = ['apple', 'banana', 'c', 'd','e','f','g','h','i','j']; 

// selected fruits 
$scope.selection = []; 

// toggle selection for a given fruit by name 
    $scope.toggleSelection = function toggleSelection(fruitName) { 
     var idx = $scope.selection.indexOf(fruitName); 

     // is currently selected 
     if (idx > -1) { 
     $scope.selection.splice(idx, 1); 
     } 
     // is newly selected 
     else { 
     $scope.selection.push(fruitName); 
     } 
    }; 
    }]); 
})(angular.module('app', [])); 

https://jsbin.com/goqekewalu/edit?html,js,output

Answer 1

これは、cssを使用して、インラインブロックまたは浮動小数点数で行うことができます。

.form-group label.checkbox-inline { 
    padding-left: 40px; 
    margin-left: 0; 
    float: left; 
    width: 50%; 
} 

ライブデモ：山車でこれを行うための例では、CSSファイルにこのスタイルを追加することができますが、おそらくCSSでこれを行うことができますhttps://jsbin.com/qawoqagebu/1/edit?html,css,js,output