Bootstrap, позволяющий контенту быть гибким и адаптивным независимо от формата HTML

Question

Итак, у меня есть «в основном» функциональная система, которая сейчас работает как CMS: пользователь заходит в редактор и выбирает один из четырех шаблонов. В шаблоне они нажимают на раздел, где они могут добавить изображения, текст или оба.

У меня есть экран предварительного просмотра, который показывает им, что они делают, но проблема в том, что они могут создать что-то здесь, где это выглядит так, будто изображение умещается в пространство, но когда оно сохранено и показано на огромном дисплее, оно подкрадывается к сверху и имеет тонну пустого пространства внизу.

Так что я использую TinyMCE, и когда пользователь сохраняет информацию, которую он сохраняет в виде HTML, в базе данных, и на моей странице отображения (код ниже) у меня есть этот управляемый базой данных HTML, проходящий через объект JSON.

Моя вещь такова: как я могу использовать существующую Bootstrap, чтобы убедиться, что независимо от того, какой макет я использую ниже (либо полная ширина, 2 полуширины, либо половина ширины с 2 четвертью высоты половиной деления), содержимое внутри может быть более отзывчивым и гибким? Я пытаюсь сделать так, чтобы отображаемый контент более точно соответствовал тому, что они видят в редакторе, чтобы независимо от того, какой компьютер они использовали для его создания, он был более отзывчивым на дисплее

Это все мои CSS и HTML

         html,
            body {
              height: 100vh;
              width: 100vw;
              overflow: hidden;
            }

            iframe{
              height:100% !important;
              width:100% !important;
            }

            .middle p{
              max-height:100%;
            }

            .my-container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              height: 100vh;
              width:100vw;
            }

            .my-container>.top [class^="col-"],
            .my-container>.bottom [class^="col-"] {
              background-color: #778899  ;
              color: white;
              text-align: center;
            }

            .my-container>.middle {
              flex-grow: 1;
              padding:30px;
              /*background-image: url('images/bg_green.svg');*/
              background-size: cover;
            }

            .my-container>.middle>* {
            }

    <div class="container-fluid my-container d-flex h-100">

        <div class="row top">
            <?php include 'banner.php'?>
        </div>

        <div class="row middle" id="middle" style="background-image: url();">
            <!-- Full Page Divs -->
            <div class="col-lg-12" id="fullColumn">
                <div class="fullContent" id="fullContent" style="height: 100%; ">
                </div>
            </div>
            <!-- End Full Page Divs -->

            <!-- Half Page Divs -->
            <div class="col-lg-6 leftColumn " id="leftColumn" style="align-items: center;">

                <div class="leftContent" id="leftContent" style=" margin:auto; height: 100%; ">        

                </div>
            </div>

            <div class="col-lg-6 rightColumn" id="rightColumn">

              <div class="rightContent" id="rightContent" style=" height: 100%; ">

              </div>

            </div>
            <!-- End Half Page Divs -->

            <!-- Quarter Page Divs -->

            <!-- Left -->
            <div class="col-lg-6"  id="leftColumnQtr">
              <div class="row" style="height:50%; padding-bottom: 15px;">
                <div class="col-lg-12" style="height:100%;">
                    <div  id="topLeftContent" style=" height: 100%; ">
                  </div>
                </div>
              </div>
              <div class="row" style="height:50%; padding-top: 15px;">
                <div class="col-lg-12" style="height:100%;">
                    <div id="bottomLeftContent" style=" height: 100%;">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6" id="rightColumnQtrHalf" >
                <div id="rightQtrContent" style=" height: 100%; ">
                </div>
            </div>

            <!-- right -->
            <div class="col-lg-6" id="rightColumnQtr">
                <div id="leftQtrContent" style="height: 100%;">
                </div>
            </div>
            <div class="col-lg-6" id="leftColumnQtrHalf" >
              <div class="row" style="height:50%; padding-bottom: 15px;">
                <div class="col-lg-12" style="height:100%;">
                  <div id="topRightContent" style=" height: 100%;">
                  </div>
                </div>
              </div>
              <div class="row" style="height:50%; padding-top: 15px;">
                <div class="col-lg-12" style="height:100%;">
                  <div id="bottomRightContent" style=" height: 100%;">
                  </div>
                </div>
              </div>
            </div>
            <!-- End Quarter Page Divs -->
        </div>
        <!-- End Row Middle -->

        <div class="row bottom">
            <?php include 'ticker.php';?>
        </div>
    </div>

Answer 1

Вот решение, основанное на том, что я мог получить о том, что вы хотели. Я настоятельно рекомендую не устанавливать ширину и высоту до того, как начальная структура будет структурирована. как только скелет будет готов, вы можете начать с ним связываться.

ПРИМЕЧАНИЕ: я использовал bootstrap 4.2.1 для проверки этого. «//maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"

- РЕШЕНИЕ -

Я удалил все ваши стили, чтобы упростить их, приведенные ниже стили только для отображения Не стесняйтесь играть с ним.

<style>
    div {
        background-color: #00333333;
        margin: 0;
        padding: 5px;
        min-height: 20px;
    }

    div.row {
        background-color: #ff000033;
    }

</style>

HTML код

<div class="container-fluid">

    <div class="row top">
        <h2>something in top</h2>
    </div>

    <div id="middle">
        <div class="row">
            <!-- Full Page Divs -->
            <div class="col-sm-12">
                <h1> FULL PAGE </h1>
            </div>
        </div>
        <!-- End Full Page Divs -->

        <!-- Half Page Divs -->
        <div class="row">
            <div class="col-sm-6">
                <h1> left half </h1>
            </div>

            <div class="col-sm-6">
                <h1> right half </h1>

            </div>
        </div>
        <!-- End Half Page Divs -->

        <!-- Quarter Page Divs -->

        <!-- Left -->
        <div class="row">
            <div class="col-sm-6" id="leftColumnQtr">
                <div class="row">
                    <div class="col-sm-12">
                        <h1>topLeftContent</h1>
                    </div>
                    <div class="col-sm-12">
                        <h1>bottomLeftContent</h1>
                    </div>
                </div>
            </div>

            <div class="col-sm-6" id="rightColumnQtrHalf">
                <div class="col-sm-12">
                    <h1>Right half</h1>
                </div>
            </div>
        </div>

        <!-- right -->
        <div class="row">
            <div class="col-sm-6" id="rightColumnQtrHalf">
                <div class="col-sm-12">
                    <h1>Left half</h1>
                </div>
            </div>

            <div class="col-sm-6" id="leftColumnQtr">
                <div class="row">
                    <div class="col-sm-12">
                        <h1>top right Content</h1>
                    </div>
                    <div class="col-sm-12">
                        <h1>bottom right Content</h1>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Quarter Page Divs -->
        <!-- BONUS: may be this is what you wanted too -->

        <div class="row">
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="col-sm-12">
                            <h1>top Left Content</h1>
                        </div>
                        <div class="col-sm-12">
                            <h1>bottom Left Content</h1>
                        </div>
                    </div>
                    <div class="col-sm-6" id="rightColumnQtrHalf">
                        <div class="col-sm-12">
                            <h1>Right half</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="col-sm-12">
                            <h1>Left half</h1>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="col-sm-12">
                            <h1>top right Content</h1>
                        </div>
                        <div class="col-sm-12">
                            <h1>bottom right Content</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- End Row Middle -->
    <div class="row bottom">
        <h2>something in bottom</h2>
    </div>
</div>

Дайте мне знать, если это то, что вы намеревались.