问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

bootstrap支不支持动态列？

头像
AshWang
    322
    新手上路，请多包涵

    显示表格的列数希望能够根据传入的数据的不同而不同。
    bootstrap支持动态列吗？

    bootstrapbootstrap-table
    阅读 7k
    1 个回答
    得票最新
    头像
    mqycn
      2.1k1619

      可以。

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="demo" ng-controller="demo">

<div class="container">
  <div class="row">
    <div ng-class="colNum(row.width)" ng-repeat="row in list">
      <div class="panel panel-default">
        <div class="panel-heading">{{ row.title }}</div>
        <div class="panel-body">{{ someText }}</div>
      </div>
    </div>
  </div>
</div>

    
<script>
var app = angular.module('demo', []);
app.controller('demo', function($scope) {
    $scope.list = [
        {
            width : 3,
            title : "HAHA"
        },
        {
            title : "AAAA"
        },
        {
            title : "BBB"
        },
        {
            width : 1,
            title : "CCC"
        },
        {
            width : 4,
            title : "DDD"
        },
        {
            title : "AAAA"
        },
        {
            title : "BBB"
        },
        {
            width : 1,
            title : "CCC"
        },
        {
            width : 3,
            title : "DDD"
        },
        {
            width : 1,
            title : "CCC"
        },
        {
            width : 4,
            title : "DDD"
        },
        {
            title : "AAAA"
        },
        {
            title : "BBB"
        }
    ];
    $scope.someText = "aaaaaaa aaaaaaaa aaaaaaaa aaaaaaa aaa aaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaa aaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaa aaaaaaa aaa ";
    $scope.colNum = function(width){
        width = width || 2;
        return "col-xs-" + width;
    }
});
</script>

</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题