从 Bootstrap 4 行溢出的文本

Question

编辑：这里要求的是jsfiddle

当屏幕变得太小以至于文本无法容纳在行中时，它只会与其他行重叠，而不是扩展行高。也许这是因为我将每行的行高设置为百分比值，以便以均匀的间距和垂直对齐方式布置我的 html 页面。如何将这种重叠的文本更正到其他行？我是否应该在不设置高度的情况下以某种方式垂直对齐行？或者我可以保持原样并为每一行添加某种溢出属性，以告诉它们在必要时扩展它们的高度？

所有相关图片和代码：

全屏截图（好 - 还没有问题）

在小屏幕上悬停在中间行元素上的屏幕截图（问题）

悬停在小屏幕底行的屏幕截图：

该页面的所有 html：

<div id="landing-page" class="text-uppercase">
    <div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
        <div class="col-xs-3 flex-xs-middle">
            <img width="100" src="images/monster2.png" />
        </div>
        <div class="col-xs-3 offset-xs-6 flex-xs-middle">
            <img class="pull-xs-right" width="100" src="images/monster4.png" />
        </div>
    </div>
    <div class="row" style="height:95%;overflow-y:auto;">
        <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
            <img width="80%" src="images/monster2.png" />
        </div>
        <div class="col-md-12 col-lg-6 flex-xs-middle ">
            <div id="motto-text" style="text-align: center;">
                <h5 class="text-muted display-6">the vegan repository</h5>
                <h1 class="display-3">
                    find vegan stuff* near you.
                </h1>
                <a id="try-now-button" class="with-border clickable" href="#search-filter-page">
                    <h5 class="text-center medium-text">try now</h5>
                </a>
            </div>
        </div>
        <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
            <img class="pull-xs-right" width="80%" src="images/monster4.png" />
        </div>
    </div>
    <div class="row" style="height:5%;overflow-y:auto;">
        <h4 class="display-6 flex-xs-bottom">
            *Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
        </h4>
    </div>
</div>

我所有的页面css：

div#landing-page {
    background-color: #696969;
    height: 100%;
    padding: 110px 40px 0px 40px;
    overflow-y: auto;
    min-height:470px;
}

编辑：这里要求的是jsfiddle

Answer 1

好的。现在问题很清楚了。这个问题很容易解决。

问题出在以下 div 中。您已将其指定为 col-md-12 但当屏幕为 xs 时您没有强制它

 <div class="col-md-12 col-lg-6 flex-xs-middle ">
      <div id="motto-text" style="text-align: center;">
        <h5 class="text-muted display-6">the vegan repository</h5>
        <h1 class="display-3">
                    find vegan stuff* near you.
                </h1>
        <a id="try-now-button" class="with-border clickable" href="#search-filter-page">
          <h5 class="text-center medium-text">try now</h5>
        </a>
      </div>
    </div>

所以最简单的就是添加col-xs-12类来防止重叠

见example