如何在不影响布局的情况下控制 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中文网其他相关文章！