Question

我正在尝试创建一个简单的对话框，其中的内容以表格形式排列：

第1行
- 第1列：此单元格应包含文本<ul> <li class="text" *ngFor="let hero of heroes | async"> <a routerLink="/hero/{{hero.id}}">{{hero.name}} -> id: {{hero.id}}</a> </li> </ul>
- 第2栏：.col-md-4
第2行
- 第1栏：.col-md-4 .ml-auto
- 第2栏：.col-md-3 .ml-auto

我为此写了以下code：

.col-md-2 .ml-auto

相应的app.js文件如下所示：

<!doctype html>
<html lang="en" ng-app="app" ng-controller="myCtrl">
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>

    <script src="app.js"></script>
  </head>
  <body>
    <button ng-click="buttonClicked()">Show Modal Dialog</button>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-dialog" role="document">
         <div class="modal-content"> 
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">My title</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <div class="container-fluid">
                    <div class="row">
                      <div class="col-md-4">.col-md-4</div>
                      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
                    </div>
                    <div class="row">
                      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
                      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
                    </div>
                </div> <!-- container-fluid -->

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
                <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
            </div>
            </div> <!-- modal-content -->
        </div> <!-- modal-dialog -->
    </script>
  </body>
</html>

当我

运行'use strict'; var app = angular.module('app', ['ui.bootstrap']); app.controller('myCtrl', function($scope, $uibModal) { console.log("Init"); $scope.buttonClicked = function() { console.log("Button clicked"); var modalInstance = $uibModal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', controllerAs: '$ctrl' }); }; }); app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) { var $ctrl = this; $ctrl.ok = function () { console.log("Closing with OK"); $uibModalInstance.close(); }; $ctrl.cancel = function () { console.log("Closing with Cancel"); $uibModalInstance.dismiss('cancel'); }; });，
打开npm start链接，然后
按下按钮http://localhost:8000，

我看到连续的每个单元格（即没有表格结构）：

Bootstrap docs（使用网格部分）说它应该有效，但事实并非如此。

为什么呢？我该如何解决？

Answer 1

您正在使用

It must be related to the responsive-breakpoints。当没有足够的空间引导时，就这样做。请改用xs，它必须解决问题（col-xs-4）。

xs - ＆gt;超小型设备

sm - ＆gt;小型设备

md - ＆gt;中型设备

lg - ＆gt;大型设备

xl - ＆gt;超大型设备

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4 ml-auto">.col-xs-4 .ml-auto</div>
  <div class="row">
    <div class="col-xs-3 ml-auto">.col-xs-3 .ml-auto</div>
    <div class="col-xs-2 ml-auto">.col-xs-2 .ml-auto</div>
  </div>
</div> <!-- container-fluid -->

为什么布局不能在Angular 1中的模态对话框中工作？

1 个答案: