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