如何控制 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中文网其他相关文章！