Question

角度框架的新手。我实现了角度UI树，它工作正常，但我有一个对齐问题。请考虑以下代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="angular-ui-tree-master/examples/css/app.css" rel="stylesheet" />
    <link href="angular-ui-tree-master/dist/angular-ui-tree.min.css" rel="stylesheet" />
    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="angular-ui-tree-master/dist/angular-ui-tree.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="MyCtrl">
        <script type="text/ng-template" id="nodes_renderer.html">
          <div ui-tree-handle>
                 <span class="col-md-12">{{node.title}}</span>
          </div>
          <ol ui-tree-nodes="" ng-model="node.childlink">
            <li ng-repeat="node in node.childlink"  ui-tree-node ng-include="'nodes_renderer.html'">
            </li>
          </ol>
        </script>
        <div ui-tree="treeOptions" class="dd">
            <ol ui-tree-nodes="" ng-model="data" id="tree-root">
                <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" data-drag-delay="100"></li>
            </ol>
        </div>
    </div>

    <script>
        var myApp = angular.module('myApp', ['ui.tree']);
        myApp.controller('MyCtrl', function ($scope) {
            $scope.toggle = function (scope) {
                console.log('menu collapse');
                scope.toggle();
            };
            $scope.data = [
           {
               "id": "1",
               "title": "node1",
               "childlink": [
                   {
                       "id": "2",
                       "title": "node 1.1",
                       "childlink": [
                             {
                                 "id": "3",
                                 "title": "node 1.1.1",
                                 "childlink": []
                             },
                              {
                                  "id": "4",
                                  "title": "node 1.1.2",
                                  "childlink": []
                              }
                       ]
                   },
                    {
                        "id": "5",
                        "title": "node 1.2",
                        "childlink": []
                    }
               ]
           }
            ];
        });
    </script>
</body>
</html>

我累了没有bootstrap （class =“col-md-12”）它运行正常且内容正确对齐但我需要使用使用bootstrap （class = “col-md-12”）内容未对齐 {{node.title}}

在我的项目引导程序中，在许多地方实现，因此无法覆盖类col-md-12。

enter image description here

Answer 1

//尝试那样......希望它能正常工作。

.contentDiv {
    position: relative;
}

@keyframes bouncing {
    0% {bottom: 0;}
    50% {bottom: 20px;}
    100% {bottom: 0;}
}

.arrow {
    animation: bouncing 1s infinite ease-in-out;
    bottom: 0;
    display: block;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
}

角度UI树内容未正确显示

1 个答案: