html - 移动 View 中的文本重叠

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

如果您正在使用 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>