Отзывчивость за счет ширины контейнера

Я использую 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; } }

twitter-bootstrap responsiveness
person SatAj    schedule 06.05.2015    source источник
comment
У меня есть предложение, почему бы вам просто не сделать свой form горизонтальным и не создать два столбца, один для левой навигации и один для самой формы, вместо того, чтобы размещать каждый элемент формы в столбце, это довольно беспорядочно, если вы спросите меня. Если вы хотите, чтобы вы, я предоставлю аккуратный ответ, который может помочь вам в этом и будущих проектах. Просто скажи да.   -  person CENT1PEDE    schedule 07.05.2015
comment
Также просто поместите метки над input, это будет лучше выглядеть.   -  person CENT1PEDE    schedule 07.05.2015
comment
Да, пожалуйста, я хотел бы получить ваш ответ/решение.   -  person SatAj    schedule 07.05.2015
comment
Там, пожалуйста, прочитайте мой ответ, приятель. Я надеюсь, что это поможет вам.   -  person CENT1PEDE    schedule 08.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

jsFiddle

Проверьте это, я не уверен, что это решит вашу проблему, но вы можете перекодировать свой HTML и выполнить что-то вроде этого. Он не только аккуратнее, но и более стандартен и прост в обслуживании.

Вы также можете проверить мой ответ ЗДЕСЬ, это может помочь вы лучше понимаете Grid-систему Bootstrap.

person CENT1PEDE    schedule 08.05.2015
comment
Я ценю ваш ответ. Но поскольку я использую сетку начальной загрузки, макет формы настраивается в зависимости от ширины экрана, например. @media (min-width: 1200px для col-lg-... и т. д. Могу ли я каким-либо образом установить макет формы через ширину ‹div class=form-container›, так как я буду использовать эту форму во многих местах, в модальная вдова или в частичном разделе страницы, и я хочу, чтобы поле метки настраивалось на основе ширины контейнера формы, а не ширины экрана.Или любая другая логика, если вы можете предложить? - person SatAj; 08.05.2015
comment
Какую версию начальной загрузки вы используете, приятель? Вы уже проверили это? GridSystem. Чего я не понимаю: 1. Почему вы хотите, чтобы ярлык располагался именно так? Лучше, если они будут в топе input? @аджей - person CENT1PEDE; 09.05.2015
comment
@ajay В моем ответе ширина form также регулируется в зависимости от размера экрана. Система сетки Bootstrap в вер. 3.3.4 легко. Прочитайте это. Ответ Пока я просто не понимаю, почему вы хотите форма именно такая. Но пока все, что я могу предложить, это использовать систему сетки, которую я предлагаю. Извините, если я не смог вам помочь, но, пожалуйста, просто спросите меня, нужна ли вам дополнительная помощь. - person CENT1PEDE; 09.05.2015