Angular 1模态框内布局失效问题咨询

没问题，我帮你完善代码，实现你想要的表格布局对话框。首先得确保引入完整的Bootstrap样式文件，另外你用到的ml-auto是Bootstrap 4的间距类，如果是Bootstrap 5的话需要换成ms-auto（逻辑属性替代方向属性），下面我用Bootstrap 4来匹配你给出的类名，给出完整可运行的代码：

<!doctype html>
<html lang="en" ng-app="app" ng-controller="myCtrl">
<head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <!-- 引入完整的Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <!-- 引入AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <!-- 对话框容器，用Bootstrap的modal组件示例 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">自定义布局对话框</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 用Bootstrap的栅格系统实现表格式布局 -->
                    <div class="container-fluid">
                        <!-- 第一行 -->
                        <div class="row mb-3">
                            <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>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存更改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 触发对话框的按钮 -->
    <button type="button" class="btn btn-primary mt-3 ml-3" data-toggle="modal" data-target="#exampleModal">
        打开对话框
    </button>

    <!-- 引入Bootstrap依赖的jQuery和Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

    <script>
        // AngularJS模块和控制器
        angular.module('app', [])
        .controller('myCtrl', function($scope) {
            // 这里可以添加你的控制器逻辑
        });
    </script>
</body>
</html>

布局说明： #

• 第1行第1列：col-md-4 在中等及以上屏幕（≥768px）占据12栅格系统中的4列宽度，小屏幕会自动堆叠
• 第1行第2列：col-md-4 ml-auto 同样占4列宽度，ml-auto 会自动填充左侧剩余空间，让这个单元格向右对齐
• 第2行第1列：col-md-3 ml-auto 占3列宽度，向右对齐
• 第2行第2列：col-md-2 ml-auto 占2列宽度，向右对齐

如果使用Bootstrap 5，只需要把所有的ml-auto替换成ms-auto，同时更新Bootstrap的CSS和JS链接即可。

内容的提问来源于stack exchange，提问作者Glory to Russia