2017-08-24 3 views
0

の下部に列滞在オーケー人はので、私はこの緑のコンテナを持って作りますか? - それの一番下にあると私は、このようなテキストにスタイルを追加しようとした親(緑背景) enter image description hereブートストラップは、親

です:

<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%; 
} 
+0

あなたのCSSだけでなく – RasmusGlenvig

+0

@RasmusGlevig追加を追加してください。 – IkePr

答えて

0
<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> 
+0

動作しません。テキストは "現在オンラインです"の上にオーバーラップします – IkePr

+0

@IkePr私のコードを修正しました。高さを追加 – zynkn

+0

これは結果です:http://imgur.com/a/keywx – IkePr

関連する問題