Bootstrap 5 模態表單設計 - 列/行如何工作？

Question

我正在用燒瓶/python 設計我的第一個程序，並在前端使用 Bootstrap 5。 我有一個至少有 6 個表單行的模式，排列表單輸入框以使其看起來不錯的最佳做法是什么？ 我是否將其放入 2 列，然后將每個表單行放在單獨的行中？ 假設模態有自己的列/行號不與 html 的 rest 對話是否正確，或者它是否以某種方式連接？ 在我編寫/重寫一堆標簽和類之前，也許有人可以給我一個簡短的指南/解釋。 謝謝！

Answer 1

當您使用引導程序創建一行時，它會采用您的 div 的原始大小。 那么所有的 col-x 都會是這一行的一個細分（寬度）

排列表單輸入框以使其看起來不錯的最佳做法是什么？

這完全取決於你。 如果您希望有一個 label 加上每行（行）的輸入，那么您可以執行以下操作：

<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 的 rest 對話是否正確，或者它是否以某種方式連接？

這也是正確的，您模態中的行未連接到 HTML 的 rest

我想你已經看過這個頁面了，但以防萬一，這里是文檔： https://getbootstrap.com/docs/5.0/layout/grid/