相关疑难解决方法(0)

在没有任何自制课程的情况下,在twitter bootstrap中设计一个看起来像这样的表单(请参阅下面的链接)的最佳方法是什么？

是否可以在表单水平内部设置内部表单内联,如下例所示:

我在默认文本框中使用bootstrap占据列的全宽,我想将搜索图标放在文本框的末尾.

我的代码是这样的:

<div class="container">
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="control-label">Name</label>
            <input id="txtName" class="form-control input-sm" />
            <span class="glyphicon glyphicon-search"></span> 
        </div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>

我不想使用输入组.

请用css建议替代方法或备用html.

当附加input-group到a时form-inline,在input-group"新行"上显示在表单下方而不是与其他控件内联.

看起来这是因为input-group包装器类display设置为table而其他输入正常工作,其display设置为inline-block.当然,这是不可能给予input-group的inline-block显示器,因为它的子add-on跨度,其中有display: table-cell,需要父母的财产,以正确对齐.

所以我的问题是:是否可以使用Bootstrap类专门input-group在内联表单中使用？如果没有,那么允许使用自定义类的最佳解决方法是什么.

这是一个说明我的观点的演示.代码如下:

<form action="" class="form-inline">
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>

    <div class="checkbox">
        <label>
            <input type="checkbox" /> and Checkboxes
        </label>
    </div>
    <select class="form-control" style="width: 150px;">
        <option>and Selects</option>
    </select>

    <button type="submit" class="btn btn-default">and Buttons</button>
    <div class="input-group" …

嗨我试图使内联形式混合水平我有http://jsfiddle.net/TNLnP/3/但我想得到类似的东西

<label><input>
<label><input><label><input><label><input>

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

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

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

我遇到的问题与案例问题中的内联表单元素的宽度有关.我用这篇文章来弄清楚如何以水平形式正确嵌套内联表单元素.这是我对案例问题的相关代码:

<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个字段都适合同一行？