如何在 Bootstrap 3 中管理輸入欄位寬度？

Bootstrap 3 中的輸入寬度管理

Bootstrap 3 提供了用於控制輸入欄位寬度的強大選項。與必須使用網格系統的概念相反，確實有內建功能可以實現此目的。

關鍵步驟是將每個輸入組（而不是整個表單）包裝在自己的行中。這種方法可確保輸入控制保持獨立並防止佈局問題。

範例用法：

<code class="html"><div class="container">
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control">
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal">
            </div>
        </div>

        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div></code>

在此更新的程式碼中，每個群組都包裝在自己的程式碼中行，允許輸入欄位變窄，同時保持佈局結構。

需要注意的是，如果螢幕寬度相同，則將套用預設區塊行為小於 lg 媒體查詢大小（預設為 1200px）。若要為較小的螢幕尺寸指定不同的寬度，可以將適當的列類別新增至行元素。

以上是如何在 Bootstrap 3 中管理輸入欄位寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！