移动视图上的重叠文本答案

【问题标题】：Overlapping text on mobile view移动视图上的重叠文本
【发布时间】：2020-05-26 14:00:14
【问题描述】：

我在引导程序上有一个移动视图问题，其中文本与下一部分重叠

我拥有的最小媒体查询是 768 像素，我正在检查的屏幕来自 iPhone XS Max

@media screen and (min-width: 768px){
    .services .carousel-inner p{
    margin-top: 110px;
}
@media screen and (min-width: 960px){
    .services .carousel-item p{
    text-align: center;
    margin-top: 120px;
}
@media screen and (min-width: 992px){
    .services .carousel-item p{
    width: 60%;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){
    .services .carousel-item p{
    margin-top: 105px;
    font-size: 1.1em;
}
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi), (max-resolution: 125dpi){
    .services .carousel-item p{
    width: 100%;
    font-size: 1.1rem;
}

我可以改进什么来解决我的问题？

【问题讨论】：

你能给我们举一个html和css的例子吗？还有其他CSS适用于该元素。我假设您要么专门在容器元素上设置高度，要么在某处有一些负边距。
@StefanF。这是html。我的代码上没有负边距，我在这个网站上使用 bootstrap 4 pastebin.com/bCbhd8dp
@Highcenburg .services 在您的 html 代码中不存在
@DohaHelmy 确实如此
根据您提供的链接，我确定不是。无论如何，可能您将固定的height 应用到您的轮播，这会使您的内容在其高度高于预定义的height 时重叠。如果是这种情况，请改用min-height

标签： css twitter-bootstrap bootstrap-4 media-queries

【解决方案1】：

.services{
    height: 100%;
    padding: 5;
}
.services .carousel-inner{
    height: 100%;
}

【讨论】：