文本从引导4行溢出

编辑：如这里要求的是jsfiddle 文本从引导4行溢出

当屏幕变得太小的文本以适应该行中，它只是重叠其他行，而不是扩展行高度。也许这是因为我将每行的行高设置为百分比值，以便以均匀间距和垂直对齐布局我的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

来源

2016-08-03 BeniaminoBaggins

你可以在最小的例子中重新创建问题吗？ – ZimSystem

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

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

好的。现在问题很明显。这个问题很容易解决。

问题在于下面的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

来源

2016-08-03 14:21:52

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

文本从引导4行溢出

回答

相关问题