如何在不影響佈局的情況下控制 Bootstrap 3 表單中的輸入寬度？

Bootstrap 3 中的輸入寬度

在 Bootstrap 3 中，管理輸入寬度可能是一個挑戰。雖然文件建議使用 .col-lg-x 類，但此解決方案有其限制。

原始問題：

原始問題源自於無法設定輸入使用 .col-lg-x 的寬度而不影響容器版面。此類別只能應用於容器本身，從而導致不良的佈局問題。

解決方案：

實用的解決方案是將每個輸入組包裝在自己的行中。透過這樣做，.col-lg-x 類別可以應用於各個群組，控制它們的寬度，同時保持整體表單結構。

程式碼範例：

<code class="html"><div class="container">
    <h1 id="My-Form">My Form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <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>

注意：

為了在不同的螢幕尺寸上實現一致的尺寸，對於較小的螢幕，可以包含.col-xs-5 類別。刪除它不會影響整體功能。

結論：

透過將輸入組包裝在單獨的行中並使用.col-lg-x 類，開發人員可以有效地在Bootstrap 3 中管理輸入寬度，無需使用網格系統或自訂CSS 類別。

以上是如何在不影響佈局的情況下控制 Bootstrap 3 表單中的輸入寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！