Css 如何确定窗体控件的宽度？

我有以下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>

我遇到一个问题，当我放置

表单控件

类时，它将在一行显示

选择

，在另一行显示

输入

。 我想保留

表单控件

类，并在同一行中显示

选择

和

输入

。

---

我知道问题出在

表单控件上，因为宽度是100%
那么，您将许多
列嵌套在彼此内部，这会导致混乱。
试试这个：

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

您可以使用
表单内联
创建内联表单

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



这是小提琴，展开输出窗口以显示正确的输出

使用“表单内联”时，控件将变为左对齐和内联块

我已经更改了代码，因为您有很多嵌套的网格类。为了给每个元素定义适当的宽度，您可以在每个输入元素上分配一个div，并用col-sm-x指定宽度