ポジション絶対に動作していない（ブートストラップ）

Question

私はこのthe last element at the bottom of the footer] 1 のようなものを取得しようとしているし、代わりに私が取得していますが、この：

：

ここ

<footer> 
<div class="container-fluid"> 
    <div class="row"> 

    <div class="col-md-3 col-sm-3 pad"> 
     <img src="img/footer.png" class="img_footer img-responsive" alt="" /> 
    </div> 
     <div class="col-md-9 col-sm-9"> 
     <div class="row test"> 
      <div class="col-md-8 col-lg-8"> 
      <p class="apropos text-justify">A Propos</p> 

      <p class="text_footer text-justify">Créée en zzrklzkrjzqlqzjflq zedokq zd^q zcw qsmldkqzmdk qzmdpzqùdp qzmdkqzmdkzqmdkqmz lqmzkmqqkzmdqmkzdqmqmqmqzkmzqzdkmqzdqodzmoz</p> 
      </div> 
      <div class="col-md-4 col-sm-4"> 
       <!-- <div class="arrow_footer"> --> 
       <a href="contact.html" class="arrow_footer">Nous contacter<i class="icon-right-circle"></i></a> 
      <!-- </div> --> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

は、CSSです

footer 
{ 
width:100%; 
height:100%; 
background-color: #009900; 
} 

.test 
{ 
position: relative; 
} 
.img_footer 
{ 
height:100%; 
} 
.apropos, .text_footer, .arrow_footer 
{ 
    color:white; 
} 
.apropos 
{ 
font-weight: bold; 
font-size: 28px; 
text-transform: uppercase; 
} 
.pad 
{ 
padding:0; 
} 
.arrow_footer 
{ 
position: absolute; 
    bottom:0; 
    right:0; 
    z-index:3; 
    font-weight:500; 
    font-size:24px; 
    text-transform: uppercase; 
    text-decoration: none; 
    } 
    .contact_text 
    { 
    text-decoration: none; 

    } 
    .text_footer 
    { 
    margin-top:50px; 
    } 

申し訳ありませんが、私はコードがまだ少し乱雑ですので、私は学んでいます。私はコンテナを置いてみました（ディスプレイのフッタはフレックスで、アラインアイテムと一緒に遊んでいましたが、どちらも動作しませんでした）。 誰かが私の理解を助けることができましたか？ ありがとうございます。

Answer 1

.arrow_footer 
{ 
position: absolute !important; 
    bottom:0; 
    right:0; 
    z-index:3; 
    font-weight:500; 
    font-size:24px; 
    text-transform: uppercase; 
    text-decoration: none; 
    } 

はposition: absolute後!importantを置きます。それが動作しているかどうかを確認してください。参考のために

：Bootstrap: container with absolute positioning?

Answer 2

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 

は本当にあなたが必要とするすべてです。行く前にまた

Bootstrap Sticky Footer Demo

Bootstrap Sticky Footer and Navbar Demo

Answer 3

、：さて、あなたはコンテナにラップすることができフッターのコンテンツ..さんはすべてビットを単純化してみましょうが、ここにあなたが必要なすべてを提供しますデモですあなたがレンダリングしたCSSを見るために使用しているChromeや何でも使っているブラウザである！importantを持つナット！あなたは、あなたがやっていることをデバッグするために、ブラウザから即座にそれを変更することができます。これは、何千もの重要なことですべてを推測してマークする代わりに、ブラウザが実際に何を受け取っているかを見るのに役立ちます。 :)

Google Chrome Debugging CSS