Question

这适用于更大的屏幕并显示我想要的方式，但在移动设备上，“右侧标题”与“左侧标题”重叠。左侧标题应该上升，但右侧标题应该低于它，但相反，它会在左侧标题之上。

我该怎么办？

    <div class="IdeathonCover">
       <img class="img-responsive" width="100%" src="bg-image.jpg">
            <div class="IdeathonLeftTitle">
                <h1>Left Title</h1>
            </div>
            <div class="IdeathonRightTitle">
                <h1>Right Title</h1>
            </div>
    </div>

我也尝试使用bootstrap 3布局这个方法，但它没有用。 “col-x-12”没有得到尊重：

    <div class="IdeathonCover">
       <img class="img-responsive" width="100%" src="bgimage.jpg">
           <div class="row">
               <div class="col-md-6 col-xs-12">
                   <div class="IdeathonLeftTitle">
                       <h1>Left Title</h1>
                   </div>
               </div>
               <div class="col-md-6 col-xs-12">
                    <div class="IdeathonRightTitle">
                       <h1>Right Title</h1>
                    </div>
               </div>
           </div>
    </div>

使用的CSS如下：

    .IdeathonCover {
        position: relative;
    }
    .IdeathonLeftTitle {
        position:absolute;
        bottom: 10%;
        left: 0;
        padding: 0px 50px 20px;
        color: #fff;
        font-weight: 300;
    }
    .IdeathonRightTitle {
        position:absolute;
        bottom: 10%;
        right: 0;
        padding: 0px 50px 20px;
        color: #fff;
        font-weight: 300;
    }

任何人都知道为什么会发生这种情况？！

Answer 1

尝试在css文件的末尾添加它 -

@media (min-width: 320px) and (max-width: 750px){
.IdeathonLeftTitle { right: 0; }
.IdeathonRightTitle { left: 0; top: 67px; }
}

它应该有帮助。

Answer 2

如果您正在使用Bootstrap，据我所知，在绝对定位元素中使用Bootstrap类没有任何问题。您可以尝试以下方式：

CSS：

.IdeathonCover {
    position: relative;
}
.IdeathonTitles {
    position: absolute;
    bottom: 10%;
    width: 100%;
}

你的HTML：

<div class="container-fluid">
    <div class="row">
        <div class="IdeathonCover">
            <img class="img-responsive" src="bgimage.jpg" alt="">   
            <div class="IdeathonTitles">
                <div class="col-md-6">
                    <h1 class="text-center">Left title</h1>
                </div>
                <div class="col-md-6">
                    <h1 class="text-center">Right title</h1>
                </div>
            </div>
        </div>
    </div>
</div>

移动视图中的文字重叠

2 个答案: