如何控制 Bootstrap 3 表單中的輸入寬度？

Bootstrap 3 中的輸入寬度管理

Bootstrap 3 提供了有限範圍的選項來控製表單輸入的寬度。如最初的問題所示，使用 .col-lg-x 不會產生所需的結果。這是因為 .col-lg-x 只能應用於容器 div，導致佈局問題。

替代方法

要實現所需的功能，請考慮包裝每個輸入組都在其自己的行中，而不是將整個表單包含在一行中。例如：

<code class="html"><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></code>

在此方法中，每個輸入組都包裝在單獨的 .row 中，確保輸入寬度保持一致，無論螢幕大小如何。此外，透過將 .col-lg-5 新增至輸入容器，您還可以控制較小畫面中的輸入寬度。

限制

需要注意的是最初的問題旨在使用內建 BS 功能而不求助於網格的解決方案。然而，正如解決方案所示，即使是內建選項也需要使用網格來實現所需的行為。

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