Responsiveness through container width

Question

I am using bootstrap for responsive form layout. I am able to achieve responsive layout through bootstrap grid system (col-xs-.., col-md-.., etc..) Here's the working example: http://jsfiddle.net/xf93jnLw/2/

The issue is due to media queries, the form layout is getting adjusted through the screen view-port width, which Left nav width + form container width. And I am looking to adjust the responsiveness based on only form-container width. So that if I want to use this form-container in modal window, the form fields and labels should get adjust through the form-container width, and not the whole screen view-port. Is there any pure CSS solution for this?

Appreciate your responses...

HTML code: Left nav

Long sized label for testing:

                    <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; } }

Answer 1

jsFiddle

Check this out, Im not sure if this solves your problem but you might want to re-code your HTML and follow something like this. Not only it is neater but it is more standard and easier to maintain.

You can also check my answer HERE it might help you understand Bootstrap's Grid System more.