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

从Bootstrap 4行溢出的文本

1 个答案: