我一直在努力应该做的事情应该很简单,但我没有到达任何地方。
我有以下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,如下所示:
注意:我添加了红色和蓝色边框,因此很容易看到输入框没有接近填充容器div。
无论我尝试什么,我都无法让被保险人的输入更广泛。
我已经使用了网格系统,给了容器div 10列,我想这很多。
我认为这可能是一个与angular typeahead指令有关的问题,但是考虑到这一点后,宽度问题仍然存在。
我希望社区能提供任何帮助。我承认自己是一名CSS初学者,所以如果我做了些蠢事,请指出我。
非常感谢,
灰
P.S。我应该指出我遇到了Internet Explorer 11(企业标准),我无法使用Compatability View和我的角度代码。