Question

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

我遇到了一个问题，当我放入form-control课程时，它会在一行中显示select而在另一行中显示input。我想保留form-control课程，并在同一行显示select和input。我知道问题来自form-control，因为宽度是100％

Answer 1

你很好地将很多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>

Answer 2

您可以使用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>

这是小提琴http://jsfiddle.net/aNWx3/，展开输出窗口以显示正确的输出。

使用form-inline时，控件将变为左对齐和内联块。

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

如何修复表单控件的宽度？

2 个答案: