为什么我不能让输入文本更广泛?

时间:2016-02-18 15:57:03

标签: css angularjs twitter-bootstrap twitter-bootstrap-3

我一直在努力应该做的事情应该很简单,但我没有到达任何地方。

我有以下html:

<form class="form-horizontal" role="form">
        <fieldset class="fieldset-class">
            <legend class="legend-class">Filter Risks</legend>
            <div class="form-group" style="border: solid 2px red;">
                <label for="insuredFilter" class="control-label col-xs-2">Insured</label>
                <div class="col-xs-10" style="border: solid 2px blue;">
                    <input id="insuredFilter" type="text" class="form-control" style="width: 100%;" ng-model="vm.insured" typeahead="insured as insured.InsuredName for insured in vm.getFilteredInsureds($viewValue)" typeahead-editable="false" />
                </div>
            </div>
            <div class="form-group">
                <label for="yearOfAccountFilter" class="control-label col-xs-2">Year of Account</label>
                <div class="col-xs-2">
                    <select id="yearOfAccountFilter" class="form-control widthauto-class" ng-model="vm.yearOfAccount" ng-options="option.YearOfAccountText for option in vm.yearsOfAccount track by option.YearOfAccountID"></select>
                </div>
                <label for="riskReferenceFilter" class="control-label col-xs-2">Risk Reference</label>
                <div class="col-xs-2">
                    <input id="riskReferenceFilter" type="text" class="form-control" ng-model="vm.riskFilteredByRiskReference" typeahead="risk as risk.RiskReference for risk in vm.getFilteredRisksByRiskReference($viewValue)" typeahead-editable="false" />
                </div>
            </div>
            <div>
                <button class="btn pull-right fieldset-button-class" ng-click="vm.clearFilter()">Clear</button>
                <button class="btn btn-primary btn-default pull-right fieldset-button-class" ng-click="vm.filterRisks()">Filter</button>
            </div>
        </fieldset>
    </form>

使用Bootstrap 3,如下所示:

Input screen

注意:我添加了红色和蓝色边框,因此很容易看到输入框没有接近填充容器div。

无论我尝试什么,我都无法让被保险人的输入更广泛。

我已经使用了网格系统,给了容器div 10列,我想这很多。

我认为这可能是一个与angular typeahead指令有关的问题,但是考虑到这一点后,宽度问题仍然存在。

我希望社区能提供任何帮助。我承认自己是一名CSS初学者,所以如果我做了些蠢事,请指出我。

非常感谢,

P.S。我应该指出我遇到了Internet Explorer 11(企业标准),我无法使用Compatability View和我的角度代码。

0 个答案:

没有答案