更改为新行每2个按钮

Question

我总共有10个按钮，我怎么能移动到一个新行，每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来做到这一点，无论是内联块，还是花车。对于花车做这方面的例子可以添加这种风格你的CSS文件：

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

现场演示：https://jsbin.com/qawoqagebu/1/edit?html,css,js,output