在标准表单布局模式下使用Twitter Bootstrap时如何限制控件宽度？

Question

我在＆＃34;默认＆＃34;中使用Twitter Bootstrap表单模式http://getbootstrap.com/css/#forms，表单标签位于表单控件之上。

然而，正如所宣传的那样，表单控件的宽度为100％。我希望能够偶尔控制那个宽度。

所以例如在上面我希望id文本区域说50％。我通常会将样式col-md-6应用到文本框中，但显然由于CSS继承，这在这种情况下不起作用。

这是我创建新类的最佳方法：

.force-md-6 { width: 50% !important; }

或者有更好的方法吗？

Answer 1

建议的方法是使用Bootstrap的网格。表单控件的样式为其容器的100％宽度，因此使用包装网格单元来影响布局。您的表单标记看起来类似于以下内容（看到您还没有发布一个可以使用的示例）：

<form>
    <label>Full width field</label>
    <input class="form-control" name="full-width">

    <div class="row">
        <div class="col-xs-6">
            <label>Half width field</label>
            <input class="form-control" name="half-width-1">
        </div>

        <div class="col-xs-6">
            <label>Half width field</label>
            <input class="form-control" name="half-width-2">
        </div>
    </div>
</form>

您可以使用任何网格类。在上面的示例中，我使用col-xs-6在所有屏幕尺寸上创建了50％宽度的列。

如果您想在输入旁边显示标签，请查看Bootstrap的horizontal forms。