时间戳

首页 > 解决方案 > 为什么布局在 Angular 1 的模式对话框中不起作用？

angularjs - 为什么布局在 Angular 1 的模式对话框中不起作用？

问题描述

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

我为此编写了以下代码：

<!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>

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

'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');
    };
});

当我

我看到一行中的每个单元格（即没有表格结构）：

截屏

Bootstrap 文档（使用网格部分）说它应该可以工作，但事实并非如此。

为什么？我该如何解决？

标签： angularjsbootstrap-modal

解决方案

它必须与 responsive-breakpoints您正在使用的相关。当没有足够的空间时，引导程序就可以了。使用xs它，它必须解决问题（col-xs-4）。

xs -> 超小设备

sm -> 小型设备

md -> 中型设备

lg -> 大型设备

xl -> 超大设备

<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 -->

推荐阅读