Question

好的，所以我有这个绿色容器：

我需要文字 - 你想聊聊吗？ - 位于其父级的底部（绿色背景）

我尝试在文本中添加样式：

<div class="row" style="position: relative;">
     <div style="position: absolute; bottom:0; right:0;"> Would you like to chat ? </div>   
</div>

但是这不起作用，文本只是在另一个文本上，而不是底部。 我不想使用margin-top，因为它在移动屏幕上效果不佳。

以下是代码：

    <!-- About page -->
<div class="container">
    <div class="row">
        <div class="col-lg-12"> 

            <div class="col-lg-6 bg-success">
                <div class="col-lg-6">
                    <img src="images/girlprofile.jpg" class="img-responsive" alt="pic1notworking" height="220" width="220" style="padding-bottom: 25px; padding-top: 15px;">
                </div>
                <div class="col-lg-6"  style="padding-bottom: 25px; padding-top: 15px;">
                    <center> 
                        <div class="usernamestyle"> Username <br> </div> 
                        <div class="onlinestyle">
                         is currently online <br> 
                         Would you like to chat ? <br>

                        </div>
                    </center>
                </div>
            </div>

            <div class="col-lg-6">
                <p style="font-size: 140%"> 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum, felis ac tristique tempor, tortor justo fringilla erat, id porta dui nisl quis leo. Proin non quam vitae erat placerat tincidunt. Mauris aliquam tempor finibus. Nulla a purus vehicula, tempus augue placerat, tincidunt odio. Mauris aliquet placerat urna vitae fermentum. Duis posuere risus ac elit mattis gravida. Pellentesque a quam eu massa efficitur aliquam. <br> <br>
                Suspendisse tincidunt convallis nulla in pharetra. Ut ac erat convallis, dictum velit nec, sagittis ipsum. Quisque venenatis, nisi id consectetur imperdiet, nibh velit scelerisque arcu, ac placerat neque elit sit amet nisl. Aliquam nec dolor quam. Pellentesque maximus dui id justo ullamcorper auctor. Ut placerat purus vitae ipsum sodales, vel molestie magna finibus.
                </p>
            </div>

        </div>           
    </div>
</div>

CSS：

.usernamestyle{
  font-size: 200%;

}

.onlinestyle{
  font-size: 160%;
}

Answer 1

<div class="col-lg-6" style="position: relative;height:100%; padding-bottom: 25px; padding-top: 15px;">
  <center> 
    <div class="usernamestyle"> Username <br> </div> 
    <div class="onlinestyle">
    is currently online
    </div>
  </center>
  <div style="position: absolute; bottom:0; right: 0;">
    Would you like to chat ?
  </div>  
</div>

Bootstrap使列保持在父

1 个答案: