Question

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

Imgur

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

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

我遇到的问题与案例问题中内联表单元素的宽度有关。我使用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个表单元素都在同一行。前两个元素只是整数字段，因此它们不必非常宽。调整前两个整数字段宽度的正确方法是什么，以便所有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 =＆＃34; 40％＆＃34;或者你想要的任何其他东西。我自己使用它，所以我不明白它为什么不能工作。

实施例，

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

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

实施例，

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

Answer 5

添加样式=“宽度：33％;显示：内联块;”输入标签或包含相同的类。

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

5 个答案: