如何调整Bootstrap 3内联窗体宽度？ [英] How do I adjust Bootstrap 3 inline form width?

问题描述

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

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

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

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

 < div class =form-group> 
< label class =col-lg-2 control-labelfor =id_current_case_countdata-placement =topdata-toggle =tooltiptitle =您看过多少个案例？> ;例< /标签> 
< div class =col-lg-10> 
< div class =form-inline> 
< div class =form-group> 
< input class =form-controlid =id_current_case_countmin =0name =current_case_counttype =number/> 
< / div> 
±
< div class =form-group> 
< input class =form-controlid =id_case_count_uncertaintymin =0name =case_count_uncertaintytype =number/> 
< / div> 
< div class =form-group> 
< select class =form-controlid =id_case_count_intervalname =case_count_interval> 
<选项值=每周>每周< / option> 
< option value =total> total< / option> 
< / select> 
< / div> 
< / div> 
< / div> 
< / div> 
  

问题是我希望Cases问题的所有3个表单元素都在同一行上。前两个元素只是整数字段，所以它们没有必要非常宽。什么是调整前两个整数字段的宽度的适当方法，以便所有3个字段都放在同一行上？ 解决方案

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

 < div class =content row> 
< div class =col-xs-3style =padding-right：5px;> 
< input class =form-controlid =id_current_case_countmin =0name =current_case_counttype =number/> 
< / div> 
< div class =col-xs-3style =padding-right：5px;> 
< input class =form-controlid =id_case_count_uncertaintymin =0name =case_count_uncertaintytype =number/> 
< / div> 
< div class =col-xs-6> 
< select class =form-controlid =id_case_count_intervalname =case_count_interval> 
<选项值=每周>每周< / option> 
< option value =total> total< / option> 
< / select> 
< / div> 
< / div> 
  

jsfiddle here 。

I have a form that relies on Bootstrap 3:

full working example: http://jsfiddle.net/x7vk7/2/

The gist is that I have 2 columns for content. The first column is col-lg-4, and the second is col-lg-8. The first column displays a form, and the 2nd column displays results.

The problem I'm having is related to the width of the inline form elements in the Cases question. I used this post to figure out how to properly nest inline form elements in a horizontal form. Here's the relevant code I have for the Cases question:

<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>

The problem is that I want all 3 form elements for the Cases question to be on the same line. The first 2 elements are just integer fields, so it's not necessary for them to be very wide. What's the proper way to adjust the width of those first two integer fields so that all 3 fields fit on the same line?

解决方案

If you want to achieve this all you have to do is to use this code insted of yours:

<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>

All the code in jsfiddle here.

这篇关于如何调整Bootstrap 3内联窗体宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！