0

レスポンシブ フォーム レイアウトにブートストラップを使用しています。ブートストラップ グリッド システム (col-xs-..、col-md-.. など) を介してレスポンシブ レイアウトを実現できます。

この問題はメディア クエリによるものです。フォーム レイアウトは、画面ビュー ポートの幅 (左ナビゲーションの幅 + フォーム コンテナーの幅) によって調整されます。そして、フォームコンテナの幅のみに基づいて応答性を調整しようとしています。このフォーム コンテナをモーダル ウィンドウで使用する場合、フォーム フィールドとラベルは、画面ビューポート全体ではなく、フォーム コンテナの幅で調整する必要があります。これに対する純粋な 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; } }
4

1 に答える 1

0

jsフィドル

これをチェックしてください。これで問題が解決するかどうかはわかりませんが、コードを再コーディングしてHTML、このようなものに従うことをお勧めします。見た目がすっきりするだけでなく、より標準的で維持しやすくなっています。

また、 Bootstrap のグリッド システムをより理解するのに役立つかもしれないHEREで私の回答を確認することもできます。

于 2015-05-08T05:19:18.390 に答える