### 如何设置 Form 占据 Dialog 的完整布局 为了实现 `form` 元素充满对话框（`dialog` 或模态框），可以利用 Bootstrap 提供的栅格系统和全局样式来调整容器大小以及内部组件的行为。 #### 使用 `.container-fluid` 和 `.row` 通过将表单放置在一个具有 `.container-fluid` 类的父级容器中，能够确保其宽度达到 100%，并覆盖整个可用空间[^3]。此外，`.row` 可用于进一步管理子元素之间的排列方式，并抵消可能存在的额外内边距或外边距影响。 以下是具体实现方法： ```html <div class="modal-dialog"> <div class="modal-content"> <!-- Header --> <div class="modal-header">...</div> <!-- Body with full-width form --> <div class="modal-body"> <form class="container-fluid"> <div class="row g-3"> <div class="col-md-6"> <label for="firstName" class="form-label">First Name</label> <input type="text" id="firstName" name="firstName" class="form-control"/> </div> <div class="col-md-6"> <label for="lastName" class="form-label">Last Name</label> <input type="text" id="lastName" name="lastName" class="form-control"/> </div> <div class="col-12"> <button type="submit" class="btn btn-primary w-100">Submit</button> </div> </div> </form> </div> <!-- Footer --> <div class="modal-footer">...</div> </div> </div> ``` 上述代码片段展示了如何构建一个完整的响应式表单结构，在其中应用了 `.container-fluid`, `.row`, 和 `.form-control` 等类名以优化视觉效果及功能性[^1]。 #### 自定义 CSS 调整高度 如果希望不仅水平方向上拉伸至最大尺寸，还想要垂直填充，则需增加一些自定义样式规则如下所示: ```css .modal-open .modal { display: flex; } .modal-open .modal .modal-dialog { margin: auto !important; max-height: calc(100vh - 80px); /* Adjust based on header/footer height */ overflow-y: auto; } .modal-open .modal .modal-body { padding-top: 0; padding-bottom: 0; } ``` 此部分CSS使得当页面加载含有 modal 对象时，该对象会自动居中显示并且适应屏幕的高度变化；同时减少不必要的上下空白区域以便更高效地利用空间资源[^2]。 ---