我正在使用bootstrap进行响应式表单布局。我能够通过bootstrap网格系统实现响应式布局（col-xs - ..，col-md - ..等等） 以下是工作示例：http://jsfiddle.net/xf93jnLw/2/
问题是由于媒体查询，表单布局是通过屏幕视口宽度调整的，其中左侧导航宽度+表格容器宽度。我希望仅根据表格容器宽度调整响应度。因此，如果我想在模态窗口中使用此表单容器，则表单字段和标签应通过表单容器宽度进行调整，而不是整个屏幕视图端口。是否有任何纯CSS解决方案？
感谢您的回复...
HTML代码：
左导航
用于测试的长尺寸标签：
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Medium sized label:"><div class="content ng-binding">Medium sized label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Short label:"><div class="content ng-binding">Short label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Long sized label for testing:"><div class="content ng-binding">Long sized label for testing:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Medium sized label:"><div class="content ng-binding">Medium sized label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Short label:"><div class="content ng-binding">Short label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Long sized label for testing:"><div class="content ng-binding">Long sized label for testing:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Medium sized label:"><div class="content ng-binding">Medium sized label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Short label:"><div class="content ng-binding">Short label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Long sized label for testing:"><div class="content ng-binding">Long sized label for testing:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Medium sized label:"><div class="content ng-binding">Medium sized label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Short label:"><div class="content ng-binding">Short label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Long sized label for testing:"><div class="content ng-binding">Long sized label for testing:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Medium sized label:"><div class="content ng-binding">Medium sized label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-xs-4 col-sm-4 ers-col-label">
<label class="ers-label" title="Short label:"><div class="content ng-binding">Short label:</div></label>
</div>
<div class="col-xs-8 col-sm-8 ers-col-field">
<input type="text" class="form-control">
</div>
</div>
<div class="clearfix visible-lg-block"></div>
</div>
</div>
</fieldset>
</form>
</div>
CSS：
.left-nav {float:left; background:purple; color:white; height:100%; width:10%;}
.form-container {float:left;width:85%; background:lightblue}
.ers-field {
margin: 0 0 3px 0; }
.ers-field .ers-label {
padding: 8px 0 5px 5px;
font: normal 13px Arial, sans-serif; }
.ers-field .ers-label .required {
color: #cc0000; }
.ers-field .ers-label .content {
max-width: 93%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left; }
.ers-field .ers-input {
padding: 0 15px 0 5px; }
@media (max-width: 1000px) {
.ers-col-field, .ers-col-label {
padding: 0 5px; } }
@media (min-width: 1001px) {
.ers-col-field, .ers-col-label {
padding: 0 15px 0 5px; } }