0

我正在使用引导程序进行响应式表单布局。我能够通过引导网格系统（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; } }
4

1 回答 1

0

jsFiddle

看看这个，我不确定这是否能解决你的问题，但你可能想重新编码HTML并遵循这样的事情。它不仅更整洁，而且更标准且更易于维护。

您也可以在此处查看我的答案，它可能会帮助您更多地了解 Bootstrap 的网格系统。

于 2015-05-08T05:19:18.390 回答