Html 如何调整 Bootstrap 3 内联表单宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23662873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I adjust Bootstrap 3 inline form width?
提问by Geoff
I have a form that relies on Bootstrap 3:
我有一个依赖于 Bootstrap 3 的表单：
full working example: http://jsfiddle.net/x7vk7/2/
完整的工作示例：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.
要点是我有 2 列内容。第一列是col-lg-4，第二列是col-lg-8。第一列显示表格，第二列显示结果。
The problem I'm having is related to the width of the inline form elements in the Cases question. I used this postto figure out how to properly nest inline form elements in a horizontal form. Here's the relevant code I have for the Cases question:
我遇到的问题与 Cases 问题中的内联表单元素的宽度有关。我使用这篇文章来弄清楚如何在水平表单中正确嵌套内联表单元素。这是我针对案例问题的相关代码：
<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?
问题是我希望 Cases 问题的所有 3 个表单元素都在同一行上。前 2 个元素只是整数字段，因此它们没有必要非常宽。调整前两个整数字段的宽度以使所有 3 个字段都适合同一行的正确方法是什么？
回答by paulalexandru
If you want to achieve thisall 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.
jsfiddle 中的所有代码都在这里。
回答by Andreas Finne
The recommended way stated in the documentation is to wrap the input in a parent element, and set the column width there.
文档中所述的推荐方法是将输入包装在父元素中，并在那里设置列宽。
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
http://getbootstrap.com/css/#forms-control-sizes
http://getbootstrap.com/css/#forms-control-sizes
In your example you already have them wrapped in a div so just add the col-class to your form-group.
在您的示例中，您已经将它们包装在 div 中，因此只需将 col-class 添加到您的表单组中。
回答by Ceili
You can use Bootstrap's column classes within any element group. In this case, your problem can be solved by giving each of your .form-groupdivs in the section in question an additional class of .col-xs-4. This will size each of them to be 1/3 of the available space, and all on the same line.
您可以在任何元素组中使用 Bootstrap 的列类。在这种情况下，您的问题可以通过为.form-group相关部分中的每个div 增加一个.col-xs-4. 这会将它们中的每一个调整为可用空间的 1/3，并且都在同一行上。
回答by Armageddon08
You can simply set the .col-lg-4to width="40%" or whatever else you want it set to. I use this myself so i don't see why it shouldn't work.
您可以简单地将.col-lg-4宽度设置为“40%”或您想要设置的任何其他内容。我自己使用这个，所以我不明白为什么它不应该工作。
Example,
例子，
.col-lg-4 {
width: 50%;
}
Make sure this is in a separate CSS file that is is added in the HTML AFTER the bootstrap is.
确保这是在引导程序之后添加到 HTML 中的单独 CSS 文件中。
Example,
例子，
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/local.css" rel="stylesheet">
回答by adnan kamili
Add style="width:33%;display:inline-block;" to your input tags or a class containing the same.
添加 style="width:33%;display:inline-block;" 到您的输入标签或包含相同的类。
