Html 如何修复表单控件宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24117114/
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 to fix the form-control width?
提问by Ramzy Abourafeh
I've the following code in HTML:
我在 HTML 中有以下代码：
<div class="col-sm-12">
<div ng-repeat="param in plugin.wsdlURLs track by $index" class="col-sm-12">
<select class="form-control col-sm-4" ng-model="test" ng-options="lOrU for lOrU in localOrUrl">
</select>
<input type="url" class="form-control col-sm-8 invalidInput">
</div>
</div>
I got a problem that, when I put a form-controlclass it will show the selectin one row and the inputin another row.
I want to keep the form-controlclass, and to show the selectand inputin the same row.
I know that the problem is from the form-control, because the width is 100%
我遇到了一个问题，当我放置一个form-control类时，它会select在一行中显示一个，input在另一行中显示。我想保留form-control课程，select并input在同一行中显示和。我知道问题出在form-control, 因为宽度是 100%
回答by FabioG
well you're nesting a lot of col-smcolumns inside of each other, wich results in a mess.
try this:
好吧，你在col-sm彼此内部嵌套了很多列，结果是一团糟。尝试这个：
<div ng-repeat="param in plugin.wsdlURLs track by $index" class="row">
<div class="col-sm-4">
<select class="form-control" ng-model="test" ng-options="lOrU for lOrU in localOrUrl">
</select>
</div>
<div class="col-sm-8">
<input type="url" class="form-control col-sm-8 invalidInput">
</div>
</div>
回答by Mustafa sabir
You can use form-inlinefor creating inline forms,
您可以form-inline用于创建内联表单，
<form class="form-inline" role="form">
<div ng-repeat="param in plugin.wsdlURLs track by $index">
<select class="form-control" ng-model="test" ng-options="lOrU for lOrU in localOrUrl">
</select>
<input type="url" class="form-control invalidInput">
</div>
</form>
Here is the fiddle http://jsfiddle.net/aNWx3/, expand the output windows to show proper output.
这是小提琴http://jsfiddle.net/aNWx3/，展开输出窗口以显示正确的输出。
When you use form-inline, the controls become left-aligned and inline-block.
当您使用 form-inline 时，控件变为左对齐和内联块。
I have changed the code since you had lots of nested grid classes. For defining proper width to each element you can assigne a div over each input element and specify width in terms of col-sm-x .
由于您有很多嵌套的网格类，因此我更改了代码。要为每个元素定义适当的宽度，您可以在每个输入元素上分配一个 div 并根据 col-sm-x 指定宽度。
