如何调整 Bootstrap 3 内联表单宽度？

Question

我有一个依赖于 Bootstrap 3 的表单：

完整的工作示例：http://jsfiddle.net/x7vk7/2/

要点是我有 2 列内容。第一列为col-lg-4，第二列为col-lg-8。第一列显示表单，第二列显示结果。

我遇到的问题与 Cases 问题中内联表单元素的宽度有关。我使用this post 来弄清楚如何在水平表单中正确嵌套内联表单元素。这是我为案例问题提供的相关代码：

<div class="form-group">
    <label class="col-lg-2 control-label" for="id_current_case_count" data-placement="top" data-toggle="tooltip" title="How many cases have you seen?">Cases</label>
    <div class="col-lg-10">
        <div class="form-inline">
            <div class="form-group">
                <input class="form-control" id="id_current_case_count" min="0" name="current_case_count" type="number" />
            </div>
            ±
            <div class="form-group">
                <input class="form-control" id="id_case_count_uncertainty" min="0" name="case_count_uncertainty" type="number" />
            </div>
            <div class="form-group">
                <select class="form-control" id="id_case_count_interval" name="case_count_interval">
                    <option value="weekly">per week</option>
                    <option value="total">total</option>
                </select>
            </div>
        </div>
    </div>
</div>

问题是我希望 Cases 问题的所有 3 个表单元素都在同一行。前 2 个元素只是整数字段，因此它们不必非常宽。调整前两个整数字段的宽度以使所有 3 个字段都位于同一行的正确方法是什么？

Answer 1

如果你想实现this，你所要做的就是使用你的这个代码：

<div class="content row">
    <div class="col-xs-3" style="padding-right: 5px;">
        <input class="form-control" id="id_current_case_count" min="0" name="current_case_count" type="number" />
    </div>                            
    <div class="col-xs-3"  style="padding-right: 5px;">
        <input class="form-control" id="id_case_count_uncertainty" min="0" name="case_count_uncertainty" type="number" />
    </div>
    <div class="col-xs-6">
        <select class="form-control" id="id_case_count_interval" name="case_count_interval">
            <option value="weekly">per week</option>
            <option value="total">total</option>
        </select>
    </div>
</div>

jsfiddle here中的所有代码。

Answer 2

文档中推荐的方法是将输入包装在父元素中，并在那里设置列宽。

<div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
</div>

http://getbootstrap.com/css/#forms-control-sizes

在您的示例中，您已经将它们包装在一个 div 中，因此只需将 col-class 添加到您的表单组。

Answer 3

您可以在任何元素组中使用 Bootstrap 的列类。在这种情况下，您的问题可以通过为相关部分中的每个.form-group div 提供一个额外的.col-xs-4 类来解决。这会将它们中的每一个的大小调整为可用空间的 1/3，并且全部位于同一行。

JSFiddle

Answer 4

您可以简单地将.col-lg-4 设置为 width="40%" 或您希望设置的任何其他值。我自己使用它，所以我不明白为什么它不应该工作。

例子，

.col-lg-4 {
width: 50%;
}

确保这是在一个单独的 CSS 文件中，该文件是在引导程序之后添加到 HTML 中的。

例子，

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/local.css" rel="stylesheet">

Answer 5

添加 style="width:33%;display:inline-block;"到您的输入标签或包含相同标签的类。