html - Bootstrap，无论 html 布局如何，都允许内容响应/灵活

Question

所以我有一个“主要”功能系统，现在可以作为 CMS 使用:用户进入编辑器并从四个模板中选择一个。在模板中，他们单击可以添加图像、文本或两者的部分。

我有一个预览屏幕，可以向他们展示他们正在制作的东西，但问题是他们可以在这里创建一些东西，看起来图像适合空间，但当它被保存并显示在一个巨大的显示器上时，它会爬到顶部，下面有大量的空白区域。

所以我使用 TinyMCE，当用户保存信息时，它在数据库中保存为 HTML，在我的显示页面(下面的代码)上，我有通过 JSON 对象的数据库驱动的 html。

我的想法是:如何使用现有的 Bootstrap 来确保无论我在下面使用哪种布局(全宽、2 个半宽或带有 2 个四分之一高半 div 的半宽)内容内部可以更加灵敏和灵活？我正在尝试让显示的内容更接近他们在编辑器上看到的内容，这样无论他们使用什么计算机制作它，它在显示器上的响应速度都会更快

这是我所有的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>

让我知道这是否是您想要的。