在Bootstrap 4中查看复选框的三列 [英] Vue three columns of checkboxes in Bootstrap 4
问题描述
有人可以通过bootstrap-4中的vue-js通过3列布局来帮助我吗?我想让我的复选框显示为3列.用户顺序良好,我希望顺序从第一列开始,然后从第二列开始,最后是第三列.
Can anyone help me here with a 3 column layout via vue-js in bootstrap-4. I want to get my checkboxes displaying as 3 columns. The users are in order and I want the order going down the first column, then down the second and finally the third.
<div v-for="(user, index) in users">
<div class="{'controls' : (index % (users.length/3)===0)}">
<input type="checkbox" :id="'user_'+user.id" :value="user.id" class="form-check-input" v-model="form.checkedUsers">
<label class="form-check-label" for="'user_'+userr.id">
<img :src="user.photo_url" class="small-photo mx-2"> @{{ user.first_name }} @{{ user.last_name }}
</label>
</div>
</div>
谢谢
推荐答案
使用Vue方法,使用数组块"方法将项目分为3组.使用嵌套的v-for
重复各组,然后重复各组中的项目.这会将它们分成3列,按从上到下的顺序排列 ...
Use a Vue method to group the items into 3 groups using an array "chunk" method. use nested v-for
to repeat the groups, and then the items in each group. This will put them in 3 columns ordered top-to-bottom...
Vue2控制器:
methods: {
chunk: function(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
this.groupedItems = newArr;
}
},
标记:
<div class="container" id="app">
<div class="row">
<div class="col-sm-4 py-2" v-for='(g, gIndex) in groupedItems'>
<form class="form-inline" v-for='(item, index) in g'>
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">
{{ item.name }}
</label>
</div>
</form>
</div>
</div>
</div>
演示: https://www.codeply.com/go/ZaiUsUupsr
一个替代选项是将它们放在3列中,而 则在循环中每3项重新重复.row
.所有复选框都可以放在一个row
中,并且它们按从左到右的顺序排列在3列中.
An alternate option is to put them in 3 columns without re-iterating the .row
every 3 items in the loop. All of the checkboxes can go in a single row
, and they will be in 3 columns ordered left-to-right.
演示: https://www.codeply.com/go/3gOvXFzaOw
<div class="container">
<div class="row">
<div v-for="item in items" class="col-sm-4 py-2">
<form class="form-inline">
<div class="form-check">
<input class="form-check-input" type="checkbox" >
<label class="form-check-label">
{{ item.name }}
</label>
</div>
</form>
</div>
</div>
</div>
这篇关于在Bootstrap 4中查看复选框的三列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!