如何使用 Bootstrap 使表单控件居中

Question

我错过了什么？

我可以看到容器的边框，它正确显示了我必须使用的区域。但是，当我添加行 (div) 和 offset(div) 时，它会左对齐。

 <div id="page" class="container" style="border:solid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input type="text" id="firstName" class="form-control" />
            </div>
            <div class="form-group">
                <label for="lastName">Last Name:</label>
                <input type="text" id="lastName" class="form-control" />
            </div>
        </div>
    </div>
</div>

原文由 John Doe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想我知道你的意思，但我不确定。你的意思是这样吗？

如果是这样，那么类是：

 class="text-center"

因此，您可以将代码更改为：

 <div id="page" class="container" style="border:solid">
<div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
        <div class="form-group">
            <label for="firstName">First Name:</label>
            <input id="firstName" class="form-control text-center" type="text">
        </div>
        <div class="form-group">
            <label for="lastName">Last Name:</label>
            <input id="lastName" class="form-control text-center" type="text">
        </div>
    </div>
</div>

或者您可以将它添加到您想要的控件中，例如仅输入表单控件。

希望有帮助！

原文由 Demonic Penguin 发布，翻译遵循 CC BY-SA 3.0 许可协议