Bootstrap 5 模态表单设计 - 列/行如何工作？

Posted 2023-05-08

【中文标题】Bootstrap 5 模态表单设计 - 列/行如何工作？

【英文标题】：Bootstrap 5 modal form design - how does column/row work?

【发布时间】：2021-08-30 15:44:40

【问题描述】：

我正在使用 flask/python 设计我的第一个程序，并使用 Bootstrap 5 作为前端。我有一个至少有 6 个表单行的模式，排列表单输入框以使其看起来不错的最佳做法是什么？我是否将其放入 2 列，然后将每个表单行放在单独的行中？假设模态有自己的列/行号不与 html 的其余部分对话是否正确，或者它是否以某种方式连接？在我编写/重写一堆标签和类之前，也许有人可以给我一个简短的指南/解释。谢谢！

【问题讨论】：

根据我所做的，我通常会在一行中嵌套 2 列，这样输入就在同一级别上

【参考方案1】：

当您使用引导程序创建一行时，它会采用您的 div 的原始大小。那么所有的col-x都会是这一行的一个细分（宽度）

排列表单输入框以使其看起来不错的最佳做法是什么？

这完全取决于你。如果您希望每行（行）有一个标签加上输入，那么您可以执行以下操作：

<div class="row">
    <div class="col-md-6">
        <label for="input1">label1</label>
    </div>
    <div class="col-md-6">
        <input type="text" id="input1">
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <label for="input2">label2</label>
    </div>
    <div class="col-md-6">
        <input type="text" id="input2">
    </div>
</div>

或者

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-12">
                <label for="input1">label1</label>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <label for="input2">label2</label>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-12">
                <input type="text" id="input1">
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <input type="text" id="input2">
            </div>
        </div>
    </div>
</div>

结果相同，但您更喜欢使用第一个解决方案

我是否将其放入 2 列，然后将每个表单行放在单独的行中？

这是正确的

假设模态有自己的列/行号不与 html 的其余部分对话是否正确，或者它是否以某种方式连接？

这也是正确的，模式中的行没有连接到 HTML 的其余部分

我猜你已经看过这个页面，但以防万一，这里是文档：https://getbootstrap.com/docs/5.0/layout/grid/