从 Bootstrap 4 行溢出的文本

Posted 2023-03-06

【中文标题】从 Bootstrap 4 行溢出的文本

【英文标题】：Text overflowing from Bootstrap 4 row

【发布时间】：2016-12-09 01:54:51

【问题描述】：

编辑：这里要求的是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  src="images/monster2.png" />
        </div>
        <div class="col-xs-3 offset-xs-6 flex-xs-middle">
            <img class="pull-xs-right"  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  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"  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

【问题讨论】：

你能在一个最小的例子中重现这个问题吗？

我没有看到问题。这是我用你的代码为你创建的bootply.com/DbLZ0mzPeQ。您可以使用它来进一步演示您面临的问题

@GHKarim 真的吗？您在我的问题中没有看到网页图片有问题吗？文本在文本之上，在图像之上。请再次查看我在问题中发布的图像。我不明白为什么人们没有看到这个问题。您的演示在将屏幕调整为小尺寸时会消失，因此我无法在正确的条件下对其进行测试。

显然有两个人没有阅读整个问题，其中一个投票结束了这个问题，原因是它与编程无关：D

@Beniamino_Baggins 大声笑，你拿错了一个。我的意思是我看不到如何在 bootply 中复制问题，而不是在您的帖子中

【参考方案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

【讨论】：

谢谢，但不幸的是，当在大型设备上查看网站时，这会改变网站的外观。在大型设备上，座右铭文本必须只有 6 列宽，因为我隐藏了具有怪物图像的顶行，而是在座右铭文本的每一侧显示怪物图像。但我仍然应该能够做到这一点，而文本不会以某种方式重叠到其他行上。