我正在使用引导程序进行响应式表单布局。我能够通过引导网格系统(col-xs-..、col-md-..等)实现响应式布局这是工作示例:http: //jsfiddle.net/xf93jnLw/2/
问题是由于媒体查询,表单布局正在通过屏幕视口宽度进行调整,即左导航宽度 + 表单容器宽度。我希望仅根据表单容器宽度调整响应能力。因此,如果我想在模式窗口中使用这个表单容器,表单字段和标签应该通过表单容器的宽度而不是整个屏幕视口进行调整。是否有任何纯 CSS 解决方案?
感谢您的回复...
HTML 代码:Left nav
用于测试的长标签:
<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; } }